/*
Theme Name: Shopstar BAG Child Theme
Theme URI: https://www.outtheboxthemes.com/wordpress-themes/shopstar/
Version: 1.0
Description: A customized version of Divi which adds a number of tiny features I need.
Author: Ake
Author URI: https://www.outtheboxthemes.com/
Template: shopstar
*/ 


/* แก้ไข container ให้ full width แก้ไข main ให้ ค่าแทน container เดิม /**/


/* === Base & Defaults === */
html {
  font-size: 100%; /* 1rem = 16px (เคารพการตั้งค่าผู้ใช้) */
}

body {
  font-family: "Noto Sans Thai", "Sarabun", "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
  font-size: clamp(0.97rem, 0.4vw + 0.85rem, 1.06rem) !important;
  line-height: 1.65;
  color: #111;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}


/* === Headings (fluid scale) === */
/* line-height กระชับขึ้นสำหรับหัวเรื่อง */
h1, h2, h3, h4, h5, h6 {
  font-weight: 400 !important;
  line-height: 1.2 !important;
  text-align: unset !important;
 }

/* ค่าโดยประมาณ: มือถือเล็ก → เดสก์ท็อปใหญ่ */
h1 { font-size: clamp(1.35rem, 1.6vw + 0.75rem, 2.25rem) !important; } /* ~22px → 36px */
h2 { font-size: clamp(1.20rem, 1.3vw + 0.70rem, 1.90rem) !important; } /* ~19px → 30px */
h3 { font-size: clamp(1.00rem, 1.0vw + 0.65rem, 1.50rem) !important; } /* ~16px → 24px */
h4 { font-size: clamp(0.95rem, 0.8vw + 0.60rem, 1.25rem) !important; } /* ~15px → 20px */
h5 { font-size: clamp(0.90rem, 0.6vw + 0.55rem, 1.05rem) !important; } /* ~14px → 17px */
h6 { font-size: 0.90rem !important; }                                    /* ~14px */
                                /* ~16px */

p { margin: 0 0 1em !important; }
small { font-size: 0.875rem; line-height: 1.5 !important; }

/* === Lists & Misc === */
ul, ol { padding-left: 1.25em; margin: 0 0 1em !important; }
li { margin: 0.25em 0 !important;; }

/* ลิงก์อ่านง่ายและเข้าถึงได้ */
a { color: #0d6efd; text-underline-offset: 0.15em !important; }
a:hover { text-decoration-thickness: 2px !important; }

/* === Utilities (optional) === */
.lead { font-size: clamp(1.05rem, 0.6vw + 0.9rem, 1.25rem); line-height: 1.6 !important; }
.text-sm { font-size: 0.9375rem !important; }   /* ~15px */
.text-xs { font-size: 0.875rem !important; }    /* ~14px */
.text-muted { color: #666 !important; }

/* ระยะห่างบล็อกคอนเทนต์ */
.section { margin: 2.5rem 0 !important; }
.section-sm { margin: 1.5rem 0 !important; }

/* ปรับหัวเรื่องในคอนเทนต์ยาวให้เว้นมากขึ้นเล็กน้อย */
.section h2 { margin-top: 0 !important;; }
.section h3 { margin-top: 1.25em !important; }





/*

.fullwidth_fix {
        left: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	max-width: 100vw!important;
	position: relative!important;
	right: 50%;
	width: 100vw!important;
}

*/
.container {
	position: relative;
    /*max-width: 100vw!important;*/
	width: 100vw!important;
    margin: 0 auto;
}




/* แก้ไข container ให้ full width แก้ไข จุดนี้ ให้ ค่าแทน container เดิม  ถ้า page ที่สร้างด้วย elementor ไป fix ใน container elementer/**/
/*
.content-area.full-width, body.full-width .content-area {
    width: 100% !important;
    padding: 0 !important;
	max-width: 1140px;  margin: 0 auto;
	float:none;
}

*/



.site-header
 {
	position: fixed;
    width: 100%;
    z-index: 99;
    top: 0;
	background-color: rgba(255,255,255,1);

}

.top-gap { display:block; padding-top:80px; border-bottom:0px solid #666; }


.site-content { padding-top: 0px; }


.site-header .top-bar
 {
	background-color: #000;
}


.top-bar {
	vertical-align: top;
	z-index: 10;
	height: 35px;
	display: inline-block;
	width: 100%;
	padding:0 ;
}

.site-header .top-bar .left { padding-left: 5%;}
.site-header .top-bar .right { padding-right: 5%;}


.site-header .top-bar .right a {
	color: #FFFFFF;
	text-decoration: none;
	text-transform: uppercase;
	padding: 13px 0 0 0;
	
    -webkit-transition: color 0.1s linear 0s;
     -moz-transition: color 0.1s linear 0s;
      -ms-transition: color 0.1s linear 0s;
       -o-transition: color 0.1s linear 0s;
          transition: color 0.1s linear 0s;
}


.toppromotion {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    margin: 0;
    padding: 13px 0 0 0;
    line-height: 14px;
    height: 100%; 
	color:#FFFFFF;
	font-weight:600;
	}
	
.toppromotion a { color:#FFFFFF; }	
	
	
.main-navigation > .container {
    padding-top: 40px;
}	


.site-header.left-aligned .branding {
    text-align: left;
    display: inline-block;
    width: 10%;
    height: 90px;
    /* line-height: 100px; */
    /* border: 1px solid #999; */
    margin-left: 13%;
}


.site-header .branding {
    padding: 20px 0 15px 0;
}

.nav2 { display: inline-block;  width: 70%; height:60px; padding: 12px 6%;}

.main-navigation, .main-navigation-mega-menu {
    /* clear: both; */
    display: inline-block;
    /* float: left; */
    width: 100%;
    height: auto;
    margin: -20px 10px;
    vertical-align: top;
}



.site-header .main-navigation.bottom-border {
    border-bottom: 0px solid #000000;
}


.account-link {
  padding: 10px 0 0 0 !important;
 
}

#main-menu {
     background-color: rgba(255,255,255,0) !important;  }


.main-navigation a {
    display: block;
    text-decoration: none;
    font-weight: 400;
    font-size: 1rem;
    letter-spacing: 1px;
    /*line-height: 19px;*/
    text-transform:none;
    padding: 0 20px 22px 0;
}


/* Mobile Menu */

.main-navigation .menu-toggle,
.main-navigation .close-button {
    display: none;
}

.submenu-toggle {
	display: none;
	position: absolute;
	top: 0;
	right: 0;
	margin: 0;
	padding: 10px 14px;
	padding: 2px 11px 5px 14px; 
	height: 33px;
	line-height: 15px;
	text-align: center;
	font-size: 28px;
	z-index: 9;
	cursor: pointer;
    -webkit-transition: all 0.2s ease 0s;
     -moz-transition: all 0.2s ease 0s;
      -ms-transition: all 0.2s ease 0s;
       -o-transition: all 0.2s ease 0s;
          transition: all 0.2s ease 0s;
    /*background-color:#03C !important;		*/  
}
.submenu-toggle .otb-fa,
.submenu-toggle .fa {
	font-weight: 300;
}
.submenu-toggle:hover .otb-fa,
.submenu-toggle:hover .fa {
	color: rgba(255,102,0,0.6);
}


.site-footer .bottom-bar {
    color: #fff;
    padding: 30px 0 30px;
    font-size: 14px;
    line-height: 22px;
    font-weight: 400;
    text-align: center; 
	background-color:#003d32;
	}
	
.site-footer .widgets {
	/*background-color: #e5eff8;*/
	background-color: #fff;
}
	
	
.site-footer .widgets .padder {
   	padding: 0% 2% ;

}	

.site-footer .widgets ul li h2.widgettitle {
    padding: 0 0 7px;
    margin: 0 0 10px 0;
    font-size: 1rem !important;
	line-height: 1.5em;
    text-transform:none;
    font-weight: 600;
    padding-bottom: 24px;
    
}

.xoo-wsc-menu-item { display:block;}
.dgwt-wcas-search-icon { color:#000 !important;}
.xoo-wsc-sc-cont .xoo-wsc-cart-trigger > * {
      margin-top: -4px;
}




/* Body Font Weight */
body,
.site-header .site-top-bar-left a,
.site-header .site-top-bar-right a,
.site-header .site-header-right a,
.breadcrumbs,
div.wpforms-container form.wpforms-form .wpforms-field-label,
div.wpforms-container-full .wpforms-form .wpforms-field-sublabel,
div.wpforms-container form.wpforms-form input[type="text"],
div.wpforms-container form.wpforms-form input[type="email"],
div.wpforms-container form.wpforms-form input[type="tel"],
div.wpforms-container form.wpforms-form input[type="number"],
div.wpforms-container form.wpforms-form input[type="url"],
div.wpforms-container form.wpforms-form input[type="password"],
div.wpforms-container form.wpforms-form input[type="search"],
div.wpforms-container form.wpforms-form select,
div.wpforms-container form.wpforms-form textarea,
input,
select,
textarea,
.site-footer .widgets .widget a,
.header-image .overlay,
.slider-container.default .slider .slide .overlay,
.shopstar-page-builders-use-theme-styles .elementor-widget-text-editor,
.shopstar-page-builders-use-theme-styles .elementor-widget-icon-box .elementor-icon-box-content .elementor-icon-box-description {
	font-weight: 400;
}




/* Button Color */
button,
.shopstar-page-builders-use-theme-styles .widget_sow-button .ow-button-base a,
.shopstar-page-builders-use-theme-styles .elementor-widget-button .elementor-button,
.shopstar-page-builders-use-theme-styles .elementor-view-stacked .elementor-icon,
input[type="button"],
input[type="reset"],
input[type="submit"],
html #infinite-handle span button,
div.wpforms-container form.wpforms-form input[type=submit],
div.wpforms-container form.wpforms-form button[type=submit],
div.wpforms-container form.wpforms-form .wpforms-page-button,
.slider-container.default .slider a.button,
.header-image a.button,
.site-footer .mc4wp-form button,
.site-footer .mc4wp-form input[type=button],
.site-footer .mc4wp-form input[type=submit],
a.button,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #review_form #respond .form-submit input,
.woocommerce-page #review_form #respond .form-submit input,
.woocommerce ul.products li.product a.add_to_cart_button,
.woocommerce-page ul.products li.product a.add_to_cart_button,
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled],
.woocommerce button.button:disabled:hover,
.woocommerce button.button:disabled[disabled]:hover,
.woocommerce button.button.alt:disabled,
.woocommerce button.button.alt:disabled[disabled]
.woocommerce button.button.alt:disabled,
.woocommerce button.button.alt:disabled:hover,
.woocommerce button.button.alt:disabled[disabled],
.woocommerce button.button.alt:disabled[disabled]:hover,
.woocommerce div.product form.cart .button,
.woocommerce table.cart input.button,
.woocommerce-page #content table.cart input.button,
.woocommerce-page table.cart input.button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce input.button.alt,
.woocommerce-page #content input.button.alt,
.woocommerce button.button.alt,
.woocommerce-page button.button.alt,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.shopstar-page-builders-use-theme-styles .widget_sow-button .ow-button-base a,
.shopstar-page-builders-use-theme-styles .elementor-widget-button .elementor-button,
.wp-block-search__button,
.wc-block-components-button:not(.is-link).contained,
.wc-block-components-button:not(.is-link).outlined:hover,
.wc-block-grid__product-add-to-cart.wp-block-button .wp-block-button__link {
	background-color: #cc3300;
    -webkit-transition: all 0.2s ease 0s;
     -moz-transition: all 0.2s ease 0s;
      -ms-transition: all 0.2s ease 0s;
       -o-transition: all 0.2s ease 0s;
          transition: all 0.2s ease 0s;
}



/* Heading Font Weight */
h1, h2, h3, h4, h5, h6,
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a,
h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited,
.slider-container.default .slider .slide .overlay h1,
.slider-container.default .slider .slide .overlay h2,
.slider-container.default .slider .slide .overlay h3,
.slider-container.default .slider .slide .overlay h4,
.slider-container.default .slider .slide .overlay h5,
.slider-container.default .slider .slide .overlay h6,
.header-image .overlay h1,
.header-image .overlay h2,
.header-image .overlay h3,
.header-image .overlay h4,
.header-image .overlay h5,
.header-image .overlay h6,
ul.product_list_widget li .product-title,
.content-area .widget-title,
.widget-area .widget-title,
.site-footer .widgets ul li h2.widgettitle,
.woocommerce #content div.product .product_title,
.woocommerce div.product .product_title,
.woocommerce-page #content div.product .product_title,
.woocommerce-page div.product .product_title,
.woocommerce a.button,
.woocommerce #respond input#submit,
.woocommerce button.button,
.woocommerce input.button,
a.button,
.shopstar-page-builders-use-theme-styles .widget_sow-button .ow-button-base a,
.shopstar-page-builders-use-theme-styles .elementor-widget-button .elementor-button,
.shopstar-page-builders-use-theme-styles .elementor-widget-heading .elementor-heading-title,
.shopstar-page-builders-use-theme-styles .elementor-widget-icon-box .elementor-icon-box-content .elementor-icon-box-title,
.shopstar-page-builders-use-theme-styles .elementor-widget-icon-box .elementor-icon-box-content .elementor-icon-box-title a,
input[type="button"],
input[type="reset"],
input[type="submit"],
html #infinite-handle span button,
html #infinite-handle span button:hover,
div.wpforms-container form.wpforms-form input[type=submit],
div.wpforms-container form.wpforms-form button[type=submit],
div.wpforms-container form.wpforms-form .wpforms-page-button,
.wc-block-grid__product-add-to-cart.wp-block-button .wp-block-button__link {
	font-weight: 500;
}


/* button:hover,t */

button:hover,
.shopstar-page-builders-use-theme-styles .widget_sow-button .ow-button-base a.ow-button-hover:hover,
.shopstar-page-builders-use-theme-styles .elementor-widget-button .elementor-button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
div.wpforms-container form.wpforms-form input[type=submit]:hover,
div.wpforms-container form.wpforms-form button[type=submit]:hover,
div.wpforms-container form.wpforms-form .wpforms-page-button:hover,
a.button:hover,
html #infinite-handle span button:hover,
.slider-container.default .slider a.button:hover,
.header-image a.button:hover,
.site-footer .mc4wp-form button:hover,
.site-footer .mc4wp-form input[type=button]:hover,
.site-footer .mc4wp-form input[type=submit]:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #review_form #respond .form-submit input:hover,
.woocommerce-page #review_form #respond .form-submit input:hover,
.woocommerce ul.products li.product a.add_to_cart_button:hover,
.woocommerce-page ul.products li.product a.add_to_cart_button:hover,
.woocommerce button.button.alt:disabled,
.woocommerce button.button.alt:disabled:hover,
.woocommerce button.button.alt:disabled[disabled],
.woocommerce button.button.alt:disabled[disabled]:hover,
.woocommerce div.product form.cart .button:hover,
.woocommerce table.cart input.button:hover,
.woocommerce-page #content table.cart input.button:hover,
.woocommerce-page table.cart input.button:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce input.button.alt:hover,
.woocommerce-page #content input.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce-page button.button.alt:hover,
.shopstar-page-builders-use-theme-styles .widget_sow-button .ow-button-base a.ow-button-hover:hover,
.shopstar-page-builders-use-theme-styles .elementor-widget-button .elementor-button:hover,
.wp-block-search__button:hover,
.wc-block-components-button:not(.is-link).contained:hover,
.wc-block-grid__product-add-to-cart.wp-block-button .wp-block-button__link:hover {
	background-color: rgba(217, 53, 38, 0.9);
    -webkit-transition: all 0.2s ease 0s;
     -moz-transition: all 0.2s ease 0s;
      -ms-transition: all 0.2s ease 0s;
       -o-transition: all 0.2s ease 0s;
          transition: all 0.2s ease 0s;
}


.woocommerce div.product div.images .woocommerce-product-gallery__trigger {
      z-index: 79 !important;
}



/* submenu*/
.main-navigation ul ul a {
    width: 100%;
    font-weight: 400;
    text-transform: none;
    font-size: 15px;
    line-height: 28px;
    line-height: 17px;
    padding: 7px 10px 15px 10px;
    text-align: left;
    min-width: 260px;
    border-bottom: 0.2px solid #rgba(153,153,153,1);
}

.main-navigation ul ul a:hover, .main-navigation ul ul li.current-menu-item > a, .main-navigation ul ul li.current_page_item > a, .main-navigation ul ul li.current-menu-parent > a, .main-navigation ul ul li.current_page_parent > a, .main-navigation ul ul li.current-menu-ancestor > a, .main-navigation ul ul li.current_page_ancestor > a {
    color: #000096 !important;
}



/*****************************   IFRAME    *************************************************/


.iframe-wrapper {
    width: 100%;
    height: 470px;
    overflow: hidden;
    border: 0px solid #F00;
}



.iframe-inno {
    width: 100%;
    height: 100%; 
}



/*****************************  ความสูงของ product-titel หน้า product - list    *************************************************/
.woocommerce-loop-product__title {
   height: 55px;
}


/*****************************   footer icon   *************************************************/
.footer-ico { width:25px; height:auto;}
.footer-ico2 { width:20px; height:auto;}


.hilight-footer { display:block;}

.site-footer .widgets a {
    text-decoration: none;
}




/*****************************   plugin search ajax  *************************************************/

.dgwt-wcas-search-wrapp.dgwt-wcas-layout-icon { max-width: 38px !important; }


/***********   image-flip *****************/
.image-flip-container {
  position: relative;
  display: inline-block;
  text-align:center;
}

.image-flip-container img {
  display: block;
  transition: opacity 0.3s ease-in-out;
}

.image-flip-container img.img-hover {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.image-flip-container:hover img.img-hover {
  opacity: 1;
}
/*************************************************/

/***************   product detail tab ************************/
.woocommerce-tabs ul.tabs, .woocommerce div.product .woocommerce-tabs ul.tabs, .woocommerce-page #content div.product .woocommerce-tabs ul.tabs, .woocommerce-page div.product .woocommerce-tabs ul.tabs {   
    width: 100% !important;
    display:none;
}



/***********  แก้ หน้า admin rankmatch แสดงคอลัมเพี้ยน 
table.wp-list-table .column-product_tag {
    width: 5% !important;
}


.wp-list-table td .rank-math-column-display {
       min-width: 150px;
}
*/
@media only screen and (max-width: 1600px) { 
.nav2  { width: 75%; padding: 12px 2%; }
}


@media only screen and (max-width: 1440px) { 

.nav2 { display: inline-block;  width: 78%; height: 70px; }  
   
    


.site-header.left-aligned .branding {
       margin-left: 5%;
}

.main-navigation, .main-navigation-mega-menu {
    margin: 0px 5%;
}

.main-navigation a {
    display: block;
    text-decoration: none;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 1px;
    /*line-height: 19px;*/
    text-transform:none;
    padding: 0 0px 22px 0;
}

.main-navigation li {
      padding: 0 42px 0 0;
}

}


@media only screen and (max-width: 1366px) { 

.main-navigation li {
      padding: 0 35px 0 0;
}

.main-navigation a {
    display: block;
    text-decoration: none;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 1px;
    /*line-height: 19px;*/
    text-transform:none;
    padding: 0 0px 22px 0;
}


.toppromotion {
     padding: 10px 0 0 0;
    line-height: 14px;
    font-weight:500;
	}


}


@media only screen and (max-width: 1280px) { 

.site-header.left-aligned .branding {
       margin-left: 4%;
}

.main-navigation a {
     font-size: 15px;
   
}

}


@media only screen and (max-width: 1180px) { 
.nav2  { width: 82%; padding: 12px 2%; }
}


@media only screen and (max-width: 1024px) { 
.nav2 { display: inline-block;  width: 90%; height: 60px;  padding: 0px 6%;}


.site-header.left-aligned .branding {
    text-align: left;
    display: inline-block;
    width: 9%;
    height: 50px;
    /* line-height: 100px; */
    /* border: 1px solid #999; */
    margin-left: 0%;
}

.main-navigation, .main-navigation-mega-menu {
    margin: 13px 0px; }

.main-navigation li {
      padding: 0 15px 0 0;
}


.main-navigation a {
    display: block;
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0px;
    /*line-height: 19px;*/
    text-transform:none;
    padding: 0 20px 22px 0;
}


.site-header .top-bar .right {
   
    padding: 3px 0 0;
}

.top-gap {
    padding-top: 60px;

}


@media only screen and (max-width: 960px) {
	
.top-bar {
	height: 70px;
	width: 100%;
	 padding: 0 0%;
}	
	
#main-menu.shopstar-mobile-menu-primary-color-scheme {
     background-color:#e5eff8 !important;  }
	 
.main-navigation .close-button { background-color:#e5eff8 !important; color:#cc3300 !important;  }

.site-header.left-aligned .branding, .site-header.left-aligned .branding .description {
    width: 40% !important;
    text-align: left;
}

.nav2 { display: inline-block;  width: 58%; height:auto;  padding: 0px 0%;}

.main-navigation .menu-toggle {
    display: block;
    margin: 0 auto 0 auto;
    padding: 5px 18px;
    color: #000;
    text-transform: uppercase;
    text-align: right !important;
    cursor: pointer;
}

.main-navigation, .main-navigation-mega-menu {
    margin: 5px 0px;
}


    #main-menu.shopstar-mobile-menu-primary-color-scheme a, #main-menu.shopstar-mobile-menu-primary-color-scheme .submenu-toggle {
        color: #000 !important;
    }


/* ขีดเส้นใต้เมนู*/
.site-header .main-navigation.bottom-border.mobile {
    border-bottom-width: 0px !important; }


.iframe-wrapper {
    width: 100%;
    height: 780px;
    overflow: hidden;
    border: 0px solid #F00;
}


.main-navigation ul ul li:last-child a, .main-navigation ul ul li a {
        box-shadow: none;
        padding: 12px 30px !important;
        width: auto;
        text-indent: 12px;
    }


}

/* iphone 14 promax */
@media screen and (max-width: 480px) { 
.top-bar {
	height: 80px;
	width: 100%;
	 padding: 0 0%;
}

.xoo-wsc-menu-item { display:none !important;}
.dgwt-wcas-search-icon { color:#fff !important; display:none !important;}


.iframe-wrapper {
    width: 100%;
    height: 520px;
    overflow: hidden;
    border: 0px solid #F00;
}

.site-header .top-bar .left {
		padding: 5px 0 2px 0;
        float: none !important;
        width: 100% !important;
        text-align: center;
    	height: auto;
		margin-left:0;
	}



.site-footer .widgets ul li.widget {
    width: 100% !important;
    float: none !important;
    padding: 0 0 20px !important;
    display: block;
     text-align: left; }

.hilight-footer { display:none;}

}