/*
Theme Name: Blankslate Child
Template: blankslate
Description: Child theme cho Blankslate - custom header/footer ecommerce dùng chung cho toàn site.
Version: 1.0
*/

/* =========================================================================
   CONFIG — 69 tokens dùng chung cho TOÀN BỘ site (header, footer, mọi trang)
   Sửa giá trị tại đây để đổi màu/spacing/style toàn site.
   ========================================================================= */
:root{

  /* ---------- COLORS ---------- */
  --color_page_background:            #ffffff;
  --color_text:                       #1e2430;
  --color_light_text:                 #6b7280;
  --color_entry_line:                 #e5e8ec;
  --color_card_background:            #ffffff;
  --color_card_text:                  #1e2430;
  --color_button_background:          #ff7a1a;
  --color_button_text:                #ffffff;
  --color_button_secondary_background:#ffffff;
  --color_button_secondary_text:      #1f6feb;
  --color_button_secondary_border:    #1f6feb;
  --color_discount:                   #ff3b30;
  --color_sale:                       #ff3b30;
  --color_discount_tag_background:    #ff7a1a;
  --color_discount_tag_text:          #ffffff;
  --color_cart_dot:                   #ff3b30;
  --color_cart_dot_text:              #ffffff;
  --color_image_background:           #fef3ea;
  --color_image_loading_background:   #f1f3f5;
  --color_mask:                       rgba(20,24,32,0.55);
  --color_shadow:                     rgba(20,24,32,0.12);
  --color_scheme_1_bg:                #fff4ea;
  --color_scheme_1_gradient:          linear-gradient(135deg,#fff4ea 0%,#ffe3cc 100%);
  --color_scheme_1_text:              #1e2430;
  --color_scheme_2_bg:                #eaf2ff;
  --color_scheme_2_text:              #1e2430;
  --color_scheme_3_bg:                #1f6feb;
  --color_scheme_3_gradient:          linear-gradient(135deg,#1f6feb 0%,#144fb0 100%);
  --color_scheme_3_text:              #ffffff;

  /* ---------- TYPOGRAPHY ---------- */
  --title_font_family:      'Poppins', -apple-system, Helvetica, Arial, sans-serif;
  --title_font_size:        40px;
  --body_font_family:       'Inter', -apple-system, Helvetica, Arial, sans-serif;
  --body_letter_spacing:    0.01em;
  --body_font_size:         16px;
  --body_line_height:       1.6;
  --header_font:            'Poppins', sans-serif;
  --header_font_size:       15px;
  --header_text_uppercase:  uppercase;

  /* ---------- LAYOUT ---------- */
  --page_width:             1240px;
  --grid_horizontal_space:  24px;
  --grid_vertical_space:    48px;

  /* ---------- BUTTONS ---------- */
  --btn_hover_animation:      0.2s ease;
  --btn_shadow_offset_y:      4px;
  --btn_shadow_blur:          14px;

  /* ---------- SKU / VARIANT SELECTOR ---------- */
  --sku_selector_shadow_opacity: 0.10;
  --sku_selector_shadow_offset_y:2px;
  --sku_selector_shadow_blur:    8px;

  /* ---------- INPUTS ---------- */
  --input_border_opacity:   0.35;
  --input_shadow_offset_y:  1px;
  --input_shadow_blur:      4px;

  /* ---------- SWATCHES ---------- */
  --swatch_max_show: 6;

  /* ---------- PRODUCT DISCOUNT BADGE ---------- */
  --product_discount_style:    solid;
  --product_discount_position: top-left;
  --product_discount_radius:   6px;

  /* ---------- PRODUCT CARD ---------- */
  --product_card_style:           rounded;
  --product_card_content_align:   left;
  --product_card_border_opacity:  0.08;
  --product_card_shadow_opacity:  0.10;
  --product_card_shadow_offset_x: 0px;
  --product_card_shadow_offset_y: 6px;

  /* ---------- COLLECTION CARD ---------- */
  --collection_card_shadow_offset_y: 6px;
  --collection_card_shadow_blur:     18px;

  /* ---------- BLOG CARD ---------- */
  --blog_card_style:          rounded;
  --blog_card_shadow_blur:    16px;
  --blog_card_shadow_offset_y:6px;

  /* ---------- CART ---------- */
  --cart_type: drawer;
  --cart_empty_recommend_product_to_show: 4;
  --cart_empty_recommend_product_image_ratio: 1/1;

  /* ---------- CONTENT ---------- */
  --content_border_thickness: 1px;

  --card_radius: calc(var(--product_discount_radius) * 2);
}

*{box-sizing:border-box;}
body{
  background:var(--color_page_background);
  color:var(--color_text);
  font-family:var(--body_font_family);
  font-size:var(--body_font_size);
  line-height:var(--body_line_height);
  letter-spacing:var(--body_letter_spacing);
}
a{text-decoration:none;color:inherit;}
img{max-width:100%;}

/* =========================================================================
   SITE HEADER (áp dụng mọi trang)
   ========================================================================= */
.site-header{
  border-bottom:var(--content_border_thickness) solid var(--color_entry_line);
  background:var(--color_page_background);
  position:sticky;top:0;z-index:1000;
}
.site-header-inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 24px;max-width:var(--page_width);margin:0 auto;
  gap:var(--grid_horizontal_space);
}
.site-logo{font-family:var(--title_font_family);font-weight:700;font-size:22px;color:var(--color_text);white-space:nowrap;}
.site-logo span{color:var(--color_button_background);}
.site-logo img{max-height:40px;display:block;}

.site-nav ul{list-style:none;display:flex;gap:28px;margin:0;padding:0;}
.site-nav li{position:relative;}
.site-nav a{
  font-family:var(--header_font);font-size:var(--header_font_size);
  text-transform:var(--header_text_uppercase);font-weight:500;color:var(--color_text);
  padding:8px 0;display:block;
}
.site-nav a:hover{color:var(--color_button_background);}

/* dropdown con (submenu) */
.site-nav ul ul{
  display:none;position:absolute;top:100%;left:0;background:var(--color_card_background);
  min-width:200px;box-shadow:0 8px 24px var(--color_shadow);border-radius:8px;padding:8px 0;flex-direction:column;
}
.site-nav li:hover > ul{display:flex;}
.site-nav ul ul a{padding:10px 18px;}

.header-actions{display:flex;align-items:center;gap:18px;}
.header-icon-btn{position:relative;font-size:20px;color:var(--color_text);cursor:pointer;}
.header-cart-dot{
  position:absolute;top:-6px;right:-8px;background:var(--color_cart_dot);
  color:var(--color_cart_dot_text);font-size:10px;font-weight:700;
  width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;
}
.header-burger{display:none;font-size:24px;cursor:pointer;background:none;border:none;color:var(--color_text);}

/* announcement bar tuỳ chọn */
.site-announcement{
  background:var(--color_scheme_3_bg);color:var(--color_scheme_3_text);
  text-align:center;font-size:13px;padding:8px 16px;
}

/* =========================================================================
   SITE FOOTER (áp dụng mọi trang)
   ========================================================================= */
.site-footer{background:var(--color_scheme_1_bg);border-top:var(--content_border_thickness) solid var(--color_entry_line);padding-top:var(--grid_vertical_space);}
.footer-grid{
  display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:var(--grid_horizontal_space);
  padding-bottom:32px;max-width:var(--page_width);margin:0 auto;padding-left:24px;padding-right:24px;
}
.footer-col h4{font-family:var(--header_font);font-size:15px;margin-bottom:14px;text-transform:var(--header_text_uppercase);}
.footer-col ul{list-style:none;margin:0;padding:0;}
.footer-col a{display:block;color:var(--color_light_text);margin-bottom:10px;font-size:14px;}
.footer-col a:hover{color:var(--color_button_background);}
.newsletter-input{
  width:100%;padding:12px 14px;border-radius:8px;margin-top:10px;
  border:1px solid rgba(0,0,0,var(--input_border_opacity));
  box-shadow:0 var(--input_shadow_offset_y) var(--input_shadow_blur) var(--color_shadow);
  font-size:14px;
}
.footer-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 20px;border-radius:8px;font-weight:600;margin-top:10px;width:100%;
  background:var(--color_button_background);color:var(--color_button_text);border:none;cursor:pointer;
  box-shadow:0 var(--btn_shadow_offset_y) var(--btn_shadow_blur) var(--color_shadow);
}
.payment-icons{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap;}
.payment-icons span{
  background:#fff;border:1px solid var(--color_entry_line);border-radius:6px;
  padding:6px 10px;font-size:12px;color:var(--color_light_text);
}
.footer-bottom{
  border-top:var(--content_border_thickness) solid var(--color_entry_line);
  padding:18px 24px;max-width:var(--page_width);margin:0 auto;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  font-size:13px;color:var(--color_light_text);
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width:900px){
  .footer-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:768px){
  .site-nav{
    display:none;position:absolute;top:100%;left:0;right:0;background:var(--color_page_background);
    border-bottom:1px solid var(--color_entry_line);
  }
  .site-nav.open{display:block;}
  .site-nav ul{flex-direction:column;padding:12px 24px;gap:0;}
  .site-nav li{border-bottom:1px solid var(--color_entry_line);}
  .site-nav ul ul{position:static;box-shadow:none;display:none;padding-left:16px;}
  .site-nav li:hover > ul{display:none;} /* mobile: dùng click thay vì hover */
  .site-nav li.submenu-open > ul{display:flex;}
  .header-burger{display:block;}
  .footer-grid{grid-template-columns:1fr;}
}