/* =========================
   OFÉLIA Typography System
   Font: Bricolage Grotesque
   ========================= */

/* 1) Design tokens */
:root{
  --font-sans: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;

  /* Weights (tune if your Shopify version feels heavier/lighter) */
  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;
  --w-bold: 700;

  /* Line heights */
  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-body: 1.55;

  /* Letter spacing */
  --ls-tight: -0.02em;
  --ls-normal: 0;
  --ls-wide: 0.02em;

  /* Base font size (responsive) */
  --fs-base: clamp(15px, 0.95vw + 12px, 17px);

  /* Type scale (responsive with clamp) */
  --fs-h1: clamp(32px, 3.2vw + 18px, 52px);
  --fs-h2: clamp(26px, 2.4vw + 16px, 40px);
  --fs-h3: clamp(22px, 1.8vw + 14px, 30px);
  --fs-h4: clamp(18px, 1.2vw + 13px, 22px);
  --fs-h5: clamp(16px, 0.9vw + 12px, 18px);
  --fs-h6: clamp(14px, 0.6vw + 12px, 16px);

  --fs-small: clamp(12px, 0.35vw + 11px, 13px);

  /* Buttons */
  --fs-btn: clamp(13px, 0.6vw + 11px, 15px);
  --btn-radius: 999px; /* pill feel like many DTC beauty brands */
  --btn-py: 12px;
  --btn-px: 18px;
}

/* 2) Base */
html{ font-size: 100%; }
body{
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  font-weight: var(--w-regular);

  /* Better rendering */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Variable font niceties */
  font-optical-sizing: auto;
}

/* 3) Headings */
h1,h2,h3,h4,h5,h6,
.heading, .title{
  font-family: var(--font-sans);
  font-optical-sizing: auto;
  margin: 0 0 0.6em 0;
  color: inherit;
}

h1{ font-size: var(--fs-h1); line-height: var(--lh-tight); font-weight: var(--w-bold); letter-spacing: var(--ls-tight); }
h2{ font-size: var(--fs-h2); line-height: var(--lh-tight); font-weight: var(--w-bold); letter-spacing: var(--ls-tight); }
h3{ font-size: var(--fs-h3); line-height: var(--lh-snug); font-weight: var(--w-semibold); letter-spacing: var(--ls-tight); }
h4{ font-size: var(--fs-h4); line-height: var(--lh-snug); font-weight: var(--w-semibold); letter-spacing: var(--ls-normal); }
h5{ font-size: var(--fs-h5); line-height: var(--lh-snug); font-weight: var(--w-semibold); letter-spacing: var(--ls-normal); }
h6{ font-size: var(--fs-h6); line-height: var(--lh-snug); font-weight: var(--w-medium); letter-spacing: var(--ls-wide); text-transform: none; }

/* Optional: if Shopify version uses ALL CAPS for tiny headings */
.is-caps, .caps{
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* 4) Body text */
p{ margin: 0 0 1em 0; }
small, .small{
  font-size: var(--fs-small);
  line-height: 1.45;
}
strong, b{ font-weight: var(--w-semibold); }

/* 5) Links */
a{
  color: inherit;
  text-decoration: none;
  text-underline-offset: 0.18em;
}
a:hover{
  text-decoration: underline;
}

/* If your theme has specific link classes, keep them consistent */
.link, .text-link{
  font-weight: var(--w-medium);
}

/* 6) Buttons (covers <button>, Haravan theme buttons, and “Add to cart”) */
button,
input[type="button"],
input[type="submit"],
.btn,
.button,
.haravan-btn,
.product-add-to-cart,
.add-to-cart{
  font-family: var(--font-sans);
  font-size: var(--fs-btn);
  font-weight: var(--w-semibold);
  line-height: 1;
  letter-spacing: 0.01em;

  border-radius: var(--btn-radius);
  padding: var(--btn-py) var(--btn-px);

  /* Keep theme colors; don't force background here unless you want */
  font-optical-sizing: auto;
}

/* Button hover feel (subtle) */
button:hover,
.btn:hover,
.button:hover{
  transform: translateY(-1px);
}
button:active,
.btn:active,
.button:active{
  transform: translateY(0);
}

/* 7) Form fields */
input, select, textarea{
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--w-regular);
  line-height: 1.3;
}

/* 8) Navigation / menu text tweaks */
nav, .nav, .menu, .site-nav{
  font-family: var(--font-sans);
  font-weight: var(--w-medium);
}

/* 9) Responsive tuning (optional) */
@media (max-width: 480px){
  :root{
    --btn-py: 11px;
    --btn-px: 16px;
  }
}

@media (min-width: 1024px){
  /* If desktop Shopify looked “tighter” */
  body{ line-height: 1.6; }
}


















/* Chỉ áp dụng khi body là template-product */
body#template-product .breadcrumbs {
  display: none !important;
}

/* --- Product Image Slider: style giống trang ofelia.vn --- */

/* 1. Đưa toàn bộ slider thumbnail thành hàng ngang dưới ảnh chính */
body#template-product #gallery_02 {
  /* hiển thị các item theo hàng ngang */
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  /* cho phép cuộn ngang nếu ảnh nhiều */
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  /* đặt lại kích thước và vị trí để nằm dưới ảnh chính */
  width: 100%;
  margin: 12px 0 0 0;
  padding: 0 0 4px 0;
}

/* 2. Mỗi thumbnail item có kích thước tương tự trang cũ (desktop) */
body#template-product #gallery_02 .item {
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  margin-right: 8px;
}

/* 3. Ảnh bên trong thumbnail giữ tỉ lệ và có đường viền bo nhẹ */
body#template-product #gallery_02 .item a img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 4px;
  border: 1px solid rgba(0,0,0,0.05);
}

/* 4. Ẩn nút điều hướng dọc của Slick (không cần dùng khi hiển thị ngang) */
body#template-product #gallery_02 .slick-arrow,
body#template-product #gallery_02 .slick-dots {
  display: none !important;
}

/* 5. Responsive: giảm kích thước thumbnail khi màn hình nhỏ (mobile) */
@media (max-width: 768px) {
  body#template-product #gallery_02 {
    justify-content: center;
    padding-bottom: 6px;
  }
  body#template-product #gallery_02 .item {
    width: 48px;
    height: 48px;
    margin-right: 6px;
  }
}

/* 6. Nếu cần bo viền thumbnail giống shop cũ (màu hồng nhạt) */
body#template-product #gallery_02 .slick-current img {
  border-color: #f4d0d8; /* điều chỉnh theo màu chủ đạo của thương hiệu */
}

body#template-product .product-detail-left .slick-dots li {
  height: 2px;
  width: 4px;
  border-radius: 10px;
  margin: 4px 3px 8px 3px;
}

body#template-product .slick-dots {
    justify-content: left;
  margin-left: 12px;
}


body#template-product .product-detail-left.thumbs-on-mobile--show .slickthumb_relative_product_1 {
  margin-top: 0;
  padding-top: 0;
  padding-left: 8px;
  padding-right: 8px;
}


/* Căn giữa mũi tên của slider ảnh lớn theo chiều cao container */
/* Áp dụng riêng cho trang sản phẩm */
body#template-product {
  /* Container của slider lớn phải có position: relative để mũi tên định vị tuyệt đối */
  #gallery_1 {
    position: relative;
  }
  /* Mũi tên trước (trái) và sau (phải) */
  #gallery_1 .slick-prev,
  #gallery_1 .slick-next {
    position: absolute;
    top: 50%;                  /* đặt ở giữa theo chiều dọc */
    transform: translateY(-50%); /* căn giữa chính xác */
    z-index: 2;                /* đảm bảo nằm trên ảnh */
    display: none;
  }
  #gallery_1 .slick-prev {
    left: 0;                   /* bạn có thể điều chỉnh khoảng cách nếu muốn */
  }
  #gallery_1 .slick-next {
    right: 0;
  }
}


/* 1. Căn logo giữa trên mobile (ảnh hưởng cả header thường và sticky) */
@media (max-width: 991.98px) {
  header.ega-header .header-wrap,
  header.header_sticky .header-wrap {
    position: relative;          /* để định vị logo tuyệt đối */
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  /* Nút menu và cụm icon hai bên – chiếm độ rộng cân bằng */
  header.ega-header .toggle-nav,
  header.header_sticky .toggle-nav,
  header.ega-header .header-right,
  header.header_sticky .header-right {
    flex: 1 0 auto;
  }
  /* Logo giữa – tuyệt đối ở giữa khung header */
  header.ega-header #logo,
  header.header_sticky #logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
  }
}

/* 2. Bỏ bóng của thanh điều hướng khi sticky */
.header.header_sticky {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
}

/* 3. Thu nhỏ cỡ chữ và font-weight thường cho menu trên desktop */
@media (min-width: 992px) {
  .navigation--horizontal .menu-item__link {
    font-size: 14px;     /* điều chỉnh theo mắt nhìn */
    font-weight: 400;    /* normal */
  }
}


/* ========================================
   Tuỳ chỉnh grid sản phẩm (item_product_main)
   ======================================== */

/* 1. Tên sản phẩm lớn hơn và rõ hơn */
.item_product_main .product-name,
.item_product_main .product-name a {
  margin-top: 4px;
  font-size: 16px;         /* tăng cỡ chữ */
  font-weight: 600;        /* đậm hơn để dễ đọc */
  line-height: 1.4;
  color: var(--primary-color);  /* giữ màu chữ chính của website */
}

/* 2. Giá nhỏ hơn, mảnh và màu nhạt hơn */
.item_product_main .price,
.item_product_main .price-contact {
  font-size: 12px;                   /* thu nhỏ cỡ chữ giá */
  font-weight: 400;                  /* font mảnh */
  color: var(--text-secondary-color, #666666);  /* màu xám nhạt hơn */
}

/* Nếu theme có cấu trúc giá hiện tại/giá gốc */
.item_product_main .price .current-price,
.item_product_main .price .price--sale {
  font-weight: 400;                  /* mảnh hơn nữa */
  font-size: 12px;
  color: var(--text-secondary-color, #666666);
}

/* 3. Thu nhỏ các icon chọn biến thể (màu sắc/size) nếu có */
.item_product_main .swatch-element,
.item_product_main .product-variant-item,
.item_product_main .swatch input + label {
  width: 22px !important;
  height: 22px !important;
  margin-right: 4px;
}

/* Ẩn nút giỏ hàng tròn trên desktop */
.item_product_main button.product-item-btn,
.item_product_main button.product-item-btn.add_to_cart {
  display: none !important;
}

/* Ẩn nút giỏ hàng nhỏ ở mobile (btncart--mb) */
.item_product_main .product-info.has-btncart .btncart--mb {
  display: none !important;
}

/* Nếu dải action-bar có nút add-to-cart, ẩn riêng nút đó */
.item_product_main .product-thumbnail .action-bar .action-child.add-to-cart,
.item_product_main .product-thumbnail .action-bar .action-child.add_to_cart {
  display: none !important;
}

.product-info.has-btncart { padding-right: 0;}



/* Chỉ áp dụng cho trang product (body id="template-product") */
body#template-product {
  /* 1. Tăng cỡ chữ tên sản phẩm: desktop lớn, mobile nhỏ */
  .title-product {
    font-size: clamp(24px, 3.5vw + 10px, 40px);
    /* clamp(min, preferred, max): max ~40px trên desktop, min ~22px trên mobile */
    line-height: 1.2;
    font-weight: 700;
    padding-bottom:0;
    margin-bottom: 0;
  }

  .price-box {padding-top: 0; margin-top: 0;}

  /* 2. Thu nhỏ giá sản phẩm và làm mỏng nét hơn */
  .product-price {
    font-size: clamp(12px, 1.2vw + 6px, 14px);
    /* cỡ chữ dao động 12–14px từ mobile đến desktop */
    font-weight: 400; /* mỏng hơn mặc định */
    color: var(--text-secondary-color, #666); /* màu nhạt */
    line-height: 1.3;
  }

  /* (Nếu cần) Thu nhỏ giá gốc/giá sale tương tự */
  .product-price-old {
    font-size: clamp(12px, 1vw + 5px, 13px);
    font-weight: 400;
  }
}

/* Ẩn dòng bản quyền ở cuối trang (footer) */
footer .site-footer-copyright,
footer .footer-copyright,
footer .copyright,
footer .footer-powered-by,
footer .powered-by,
footer p.copyright,
footer p.footer-copyright {
  display: none !important;
}

/* Bỏ margin-bottom của thẻ <p> chỉ khi bên trong có ảnh */
.description-product p:has(img),
.product-description p:has(img),
.rte p:has(img) {
  margin-bottom: 0 !important;
  margin-top: 0;
}

/* Fallback cho trình duyệt cũ: đoạn có ảnh */
.description-product p > img:first-child:last-child {
  display: block;
  margin-bottom: -1.5rem;  /* bù lại margin dưới của p */
  margin-top: 0;
}

@media (max-width: 600px) {
  .ega-cr-addon .ega-menu__item {
    font-size: 14px;
  }
}

/* Giảm khoảng cách giữa tên sản phẩm và slider ảnh trên mobile */
@media (max-width: 767px) {
  /* Chỉ áp dụng cho trang sản phẩm (body id="template-product") */
  body#template-product .details-pro {
    margin-top: 0 !important;      /* bỏ margin-top 1rem (~16px) từ class mt-3 */
    padding-top: 12px !important;  /* chỉ giữ 16px khoảng cách bằng padding */
  }
}