@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 16px;
}
@layer components {
  .container {
    @apply px-6 py-10 lg:px-[50px] lg:py-20 mx-auto max-w-[1440px];
  }
  .wrapper {
    @apply mx-auto max-w-[1280px];
  }
  .wrapper-lg {
    @apply mx-auto max-w-[1320px];
  }

  .sc-container {
    @apply px-[24px] py-[32px] lg:px-[80px] lg:py-[70px] mx-auto relative overflow-clip;
  }
  .sc-container-sm {
    @apply px-[16px] py-[32px] lg:px-[60px] lg:py-[50px] mx-auto relative overflow-clip;
  }

  .kella-breadcrumb {
    @apply min-w-0 flex-1;
  }

  .kella-breadcrumb__list > li {
    @apply shrink-0;
  }

  .kella-product-variations {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .kella-product-variations .size-toggle-btn {
    flex-shrink: 0;
  }

  .kella-mobile-menu-wishlist .kella-wishlist-count {
    right: 0;
    top: -0.25rem;
  }

  @media (max-width: 767.9px) {
    .kella-breadcrumb {
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }

    .kella-breadcrumb::-webkit-scrollbar {
      display: none;
    }

    .kella-breadcrumb__list {
      flex-wrap: nowrap;
      width: max-content;
      max-width: none;
    }
  }

  .heading-h1 {
    @apply text-[36px] lg:text-[72px] leading-[120%] tracking-[0%] font-barlow;
  }
  .heading-h2 {
    @apply text-[32px] lg:text-[56px] font-barlow leading-[120%];
  }
  .heading-h3 {
    @apply text-[24px] lg:text-[36px] font-barlow leading-[120%] tracking-[0%];
  }
  .heading-h4 {
    @apply text-[16px] lg:text-[36px] font-barlow leading-[120%] tracking-[0%];
  }
  .heading-h5 {
    @apply text-[24px] lg:text-[32px] font-barlow leading-[120%] tracking-[0%];
  }
  .heading-h6 {
    @apply text-[24px] font-barlow leading-[130%] tracking-[0%];
  }
  .placeholder-input-black50 {
    @apply placeholder:text-black/50 placeholder:font-nunito placeholder:font-normal placeholder:lg:text-[16px] placeholder:text-[14px] placeholder:leading-[140%];
  }

  .checkout-input {
    @apply w-full h-[50px] px-4 bg-[#F3F3F5] rounded-[8px] outline-none focus:ring-1 focus:ring-black;
  }

  .checkout-select {
    @apply w-full h-[50px] px-4 bg-[#F3F3F5] rounded-[8px] outline-none focus:ring-1 focus:ring-black text-black appearance-none cursor-pointer;
  }

  .checkout-input-focus {
    @apply border border-transparent focus:border focus:outline-none focus:ring-0 focus:border-gray-300;
  }

  .checkout-input-rm-focus {
    @apply focus:outline-none focus:ring-0;
  }

  select.select-placeholder-custom:has(option[value=""]:checked) {
    color: #00000080;
    /* Màu xám tương đương text-gray-400 */
  }

  select.select-placeholder-custom option:first-child {
    color: #00000080;
  }

  select.select-placeholder-custom option {
    color: #000000;
  }

  .ck-content {
    /* 1. Kế thừa toàn bộ style mặc định của Tailwind Typography */
    @apply prose prose-slate max-w-none text-black font-nunito;

    /* 2. HEADINGS (Tiêu đề) */
    /* Kết hợp class typography của bạn và ép bỏ margin mặc định của prose nếu cần */
    & h1 {
      @apply heading-h1 mt-8 mb-4 font-nunito font-bold;
    }
    & h2 {
      @apply heading-h2 mt-8 mb-4 font-nunito font-bold;
    }
    & h3 {
      @apply heading-h3 mt-6 mb-3 font-nunito font-bold;
    }
    & h4 {
      @apply heading-h4 mt-6 mb-3 font-nunito font-bold;
    }
    & h5 {
      @apply heading-h5 mt-4 mb-2 font-nunito font-bold;
    }
    & h6 {
      @apply heading-h6 mt-4 mb-2 font-nunito font-bold;
    }

    /* 3. PARAGRAPH & TEXT (Đoạn văn & Chữ) */
    & p {
      @apply font-nunito leading-[150%] m-0 mb-2;
    }
    & p:last-child {
      @apply mb-0;
    }
    & strong,
    & b {
      @apply font-bold;
    }
    & i,
    & em {
      @apply italic;
    }

    /* 4. LINKS (Đường dẫn) */
    & a {
      @apply text-black font-normal underline underline-offset-1 hover:text-primary-600 transition-colors cursor-pointer;
    }

    /* 5. LISTS (Danh sách) */
    & ul {
      @apply list-disc list-outside ml-5 mb-2 font-nunito text-[16px] text-[#333333];
    }

    & ol {
      @apply list-decimal list-outside ml-5 mb-2 font-nunito text-[16px] text-[#333333];
    }
    & ul:last-child,
    & ol:last-child {
      @apply mb-0;
    }
    & li {
      @apply mb-1 pl-1;
    }
    & li::marker {
      @apply text-[#C49A45] font-bold; /* Đổi màu dấu chấm/số của list */
    }

    /* 6. QUOTE (Trích dẫn) */
    & blockquote {
      @apply border-l-4 border-[#C49A45] bg-[#F9F9F9] pl-4 py-2 pr-4 italic text-gray-600 my-6;
    }

    /* 7. IMAGES & FIGURES (Hình ảnh) */
    & img {
      @apply rounded-[8px] w-full h-auto my-6 shadow-sm object-cover;
    }
    & figure {
      @apply my-6 m-0;
    }
    & figcaption {
      @apply text-center text-[14px] text-gray-500 italic mt-2;
    }

    /* 8. TABLES (Bảng biểu - Thường bị vỡ layout trên mobile nhất) */
    & table {
      @apply w-full border-collapse border border-gray-200 text-left my-6;
    }
    & th,
    & td {
      @apply border border-gray-200 p-3 font-nunito;
    }
    & th {
      @apply bg-gray-50 font-bold uppercase text-[14px];
    }
    /* Mẹo: CKEditor thường bọc table trong class figure.table để tránh tràn ngang mobile */
    & .table {
      @apply overflow-x-auto w-full block;
    }

    /* 9. MEDIA & IFRAME (Video Youtube) */
    & .media {
      @apply relative w-full aspect-video my-6 rounded-[8px] overflow-hidden;
    }
    & iframe {
      @apply absolute top-0 left-0 w-full h-full border-0;
    }
  }

  .ck-p-14 {
    @apply text-[12px] lg:text-[14px] [&_p]:text-[12px] lg:[&_p]:text-[14px];
  }

  .ck-p-16 {
    @apply text-[14px] lg:text-[16px] [&_p]:text-[14px] lg:[&_p]:text-[16px];
  }

  .ck-p-18 {
    @apply text-[16px] lg:text-[18px] [&_p]:text-[16px] lg:[&_p]:text-[18px];
  }

  .ck-p-20 {
    @apply text-[18px] lg:text-[20px] [&_p]:text-[18px] lg:[&_p]:text-[20px];
  }

  .ck-p-20-16 {
    @apply text-[16px] lg:text-[20px] [&_p]:text-[16px] lg:[&_p]:text-[20px];
  }

  .ck-p-18-14 {
    @apply text-[14px] lg:text-[18px] [&_p]:text-[14px] lg:[&_p]:text-[18px];
  }

  .account-grid {
    @apply relative;
  }

  .account-grid::before {
    content: "";
    @apply absolute top-0 right-full w-screen h-full bg-[#F5F5F5] z-0;
  }

  .account-sidebar-wrapper,
  .account-content-wrapper {
    @apply relative z-10;
  }

  .account-sidebar-inner {
    @apply bg-transparent;
  }

  .account-grid a {
    text-decoration: none;
  }

  .account-grid a:hover,
  .account-grid a:focus {
    text-decoration: none;
  }

  .woocommerce-MyAccount-content .woocommerce-error,
  .woocommerce-MyAccount-content .woocommerce-message,
  .woocommerce-MyAccount-content .woocommerce-info {
    @apply font-nunito text-[14px] leading-[150%] mb-4 list-none rounded-[8px] px-4 py-3 border border-solid;
  }

  .woocommerce-MyAccount-content .woocommerce-message {
    @apply bg-[#E8F5E9] border-[#81C784] text-[#2E7D32];
  }

  .woocommerce-MyAccount-content .woocommerce-error {
    @apply bg-[#FCE4EC] border-[#F48FB1] text-[#C62828];
  }

  .woocommerce-MyAccount-content .woocommerce-info {
    @apply bg-[#E3F2FD] border-[#90CAF9] text-[#1565C0];
  }

  .woocommerce-MyAccount-content .woocommerce-error li,
  .woocommerce-MyAccount-content .woocommerce-message li,
  .woocommerce-MyAccount-content .woocommerce-info li {
    @apply list-none m-0;
  }

  @media (max-width: 1023px) {
    .account-grid::before {
      @apply hidden;
    }
  }
  .btn-primary {
    @apply flex items-center justify-center w-fit h-full cursor-pointer font-barlow bg-black text-white hover:text-primary-500 py-[12px] lg:py-[14px] px-4 lg:px-6 rounded-[4px] font-semibold text-[16px] lg:text-[20px] leading-[100%] tracking-[0.55px] uppercase transition-all duration-100;
  }

  .typo-Body-16px-Regular {
    @apply font-nunito text-black text-[14px] lg:text-[16px] leading-[150%] whitespace-pre-wrap font-light;
  }

  .typo-Title-Barlow-SB {
    @apply font-barlow text-black text-[18px] lg:text-[20px] leading-[100%] tracking-[0.76px] uppercase font-semibold;
  }

}

/* CF7 contact form — plain CSS (global.css is not Tailwind-compiled in browser). */
.kella-auth-notice {
  font-family: "Nunito Sans", sans-serif;
  font-size: 14px;
  line-height: 150%;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid;
  width: 100%;
  box-sizing: border-box;
}

.kella-auth-notice__text {
  margin: 0;
}

.kella-auth-notice--success {
  background-color: #e8f5e9;
  border-color: #81c784;
  color: #2e7d32;
}

.kella-auth-notice--error {
  background-color: #fce4ec;
  border-color: #f48fb1;
  color: #c62828;
}

.kella-contact-form .wpcf7-form {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* CF7 Turnstile injects captcha before fields with inline order:1 — reorder below fields, above submit. */
.kella-contact-form .wpcf7-form > .w-full.flex.flex-col.gap-4 {
  order: 1;
}

.kella-contact-form .wpcf7-form > .wpcf7-turnstile {
  order: 2 !important;
  width: 100%;
  margin-top: 0.5rem;
}

.kella-contact-form .wpcf7-form > div:has(.wpcf7-submit) {
  order: 3;
}

.kella-contact-form .wpcf7-form > .wpcf7-response-output {
  order: 4;
  width: 100%;
}

.kella-contact-form .wpcf7-form-control-wrap {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
}

.kella-contact-form .kella-contact-form__field-row {
  display: flex;
  gap: 1rem;
  width: 100%;
}

.kella-contact-form .kella-contact-form__field-col {
  flex: 1 1 0%;
  min-width: 0;
}

/* Fallback: CF7 form vẫn dùng Tailwind flex row (email + phone). */
.kella-contact-form .wpcf7-form .flex.gap-4 > div {
  flex: 1 1 0%;
  min-width: 0;
  width: auto;
  max-width: none;
}

.kella-contact-form input.wpcf7-form-control:not([type="submit"]),
.kella-contact-form textarea.wpcf7-form-control,
.kella-contact-form .kella-cf7-field {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  border: 1px solid #f3f3f5;
  border-radius: 8px;
  background-color: #f3f3f5;
  padding: 10px 12px 10px 16px;
  font-family: "Nunito Sans", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #000;
}

.kella-contact-form input.wpcf7-form-control:not([type="submit"]):hover,
.kella-contact-form textarea.wpcf7-form-control:hover,
.kella-contact-form .kella-cf7-field:hover,
.kella-contact-form input.wpcf7-form-control:not([type="submit"]):focus,
.kella-contact-form textarea.wpcf7-form-control:focus,
.kella-contact-form .kella-cf7-field:focus {
  border-color: #000;
  outline: none;
}

.kella-contact-form input.wpcf7-form-control:not([type="submit"])::placeholder,
.kella-contact-form textarea.wpcf7-form-control::placeholder,
.kella-contact-form .kella-cf7-field::placeholder {
  font-family: "Nunito Sans", sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #6a6968;
}

.kella-contact-form textarea.wpcf7-form-control,
.kella-contact-form textarea.kella-cf7-field {
  resize: none;
  min-height: 88px;
}

.kella-contact-form .wpcf7-submit {
  box-sizing: border-box;
  width: 100%;
  border: 1px solid #333;
  padding: 12px;
  text-transform: uppercase;
  background-color: #333;
  color: #fff;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 20px;
  border-radius: 4px;
  cursor: pointer;
  transition: color 0.1s ease;
}

.kella-contact-form .wpcf7-submit:hover {
  color: #f8d794;
}

.kella-contact-form .wpcf7-spinner {
  margin-left: 0.5rem;
}

.kella-contact-form .wpcf7-response-output {
  margin: 1rem 0 0;
  padding: 0;
  border: 0;
  font-family: "Nunito Sans", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #dc3232;
}

.kella-contact-form form.init .wpcf7-response-output,
.kella-contact-form form.resetting .wpcf7-response-output,
.kella-contact-form form.submitting .wpcf7-response-output {
  display: none;
}

.kella-contact-form .wpcf7-not-valid-tip {
  margin-top: 4px;
  font-family: "Nunito Sans", sans-serif;
  font-size: 13px;
  line-height: 1.4;
  color: #dc3232;
}

.kella-contact-form input.wpcf7-not-valid,
.kella-contact-form textarea.wpcf7-not-valid {
  border-color: #dc3232;
}

.kella-legal-content h1,
.kella-legal-content h2,
.kella-legal-content h3,
.kella-legal-content h4,
.kella-legal-content h5,
.kella-legal-content h6 {
  font-family: "Nunito Sans", sans-serif;
  font-weight: 700;
  color: #000000;
}

.kella-legal-content h1 {
  font-size: 24px;
  line-height: 1.3;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.kella-legal-content h2 {
  font-size: 20px;
  line-height: 1.3;
  margin-top: 1.75rem;
  margin-bottom: 0.75rem;
}

.kella-legal-content h3 {
  font-size: 18px;
  line-height: 1.35;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.kella-legal-content h4 {
  font-size: 16px;
  line-height: 1.4;
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
}

.kella-legal-content h5,
.kella-legal-content h6 {
  font-size: 16px;
  line-height: 1.4;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

@media (min-width: 768px) {
  .kella-legal-content h1 {
    font-size: 28px;
  }

  .kella-legal-content h2 {
    font-size: 24px;
  }

  .kella-legal-content h3 {
    font-size: 20px;
  }

  .kella-legal-content h4 {
    font-size: 18px;
  }
}

.woocommerce-account .woocommerce-MyAccount-content {
  width: 100% !important;
  float: none;
  max-width: none;
}

.woocommerce-account .woocommerce-order-details,
.woocommerce-account .woocommerce-customer-details {
  display: none !important;
}

.kella-voucher-dialog:not([open]) {
  display: none;
}

.kella-voucher-dialog[open] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 16px;
  border: 0;
  background: transparent;
  overflow: auto;
}

.kella-voucher-dialog::backdrop {
  background: rgb(17 24 39 / 50%);
}

.kella-voucher-dialog__panel {
  position: relative;
  width: 100%;
  max-width: 632px;
  margin: auto;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 10%), 0 8px 10px -6px rgb(0 0 0 / 10%);
}

.kella-voucher-dialog__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 24px;
  background: #fff;
  border-top: 10px solid transparent;
  border-image: linear-gradient(200.83deg, #ffd58a 2.04%, #b48935 126.04%) 1;
}

.kella-voucher-dialog__title {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 130%;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #d2a64b;
  text-align: center;
}

.kella-voucher-dialog__content {
  width: 100%;
}

@media (min-width: 1024px) {
  .kella-voucher-dialog__inner {
    gap: 32px;
    padding: 40px;
  }

  .kella-voucher-dialog__title {
    font-size: 32px;
  }
}

.woocommerce-MyAccount-content .woocommerce-message,
.woocommerce-MyAccount-content .woocommerce-error,
.woocommerce-MyAccount-content .woocommerce-info {
  font-family: "Nunito Sans", sans-serif;
  font-size: 14px;
  line-height: 150%;
  margin-bottom: 16px;
  padding: 12px 16px;
  border-radius: 8px;
  border-style: solid;
  border-width: 1px;
  list-style: none;
}

.woocommerce-MyAccount-content .woocommerce-message {
  background-color: #e8f5e9;
  border-color: #81c784;
  color: #2e7d32;
}

.woocommerce-MyAccount-content .woocommerce-error {
  background-color: #fce4ec;
  border-color: #f48fb1;
  color: #c62828;
}

.woocommerce-MyAccount-content .woocommerce-info {
  background-color: #e3f2fd;
  border-color: #90caf9;
  color: #1565c0;
}

.woocommerce-MyAccount-content .woocommerce-message li,
.woocommerce-MyAccount-content .woocommerce-error li,
.woocommerce-MyAccount-content .woocommerce-info li {
  list-style: none;
  margin: 0;
}

/* WC auto-focuses notices for screen readers — hide focus ring on reload */
.woocommerce-MyAccount-content .woocommerce-notices-wrapper:focus,
.woocommerce-MyAccount-content .woocommerce-notices-wrapper:focus-visible,
.woocommerce-MyAccount-content .woocommerce-message:focus,
.woocommerce-MyAccount-content .woocommerce-message:focus-visible,
.woocommerce-MyAccount-content .woocommerce-error:focus,
.woocommerce-MyAccount-content .woocommerce-error:focus-visible,
.woocommerce-MyAccount-content .woocommerce-info:focus,
.woocommerce-MyAccount-content .woocommerce-info:focus-visible {
  outline: none;
  box-shadow: none;
}

.kella-address-dialog:not([open]) {
  display: none;
}

.kella-address-dialog[open] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 16px;
  border: 0;
  background: transparent;
  overflow: auto;
}

.kella-address-dialog::backdrop {
  background: rgb(17 24 39 / 50%);
}

.kella-address-dialog__panel {
  position: relative;
  width: 100%;
  max-width: 632px;
  margin: auto;
}

.kella-address-dialog__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 40px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 10%), 0 8px 10px -6px rgb(0 0 0 / 10%);
}

.kella-address-dialog__title {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 130%;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #000;
  text-align: center;
}

@media (min-width: 1024px) {
  .kella-address-dialog__title {
    font-size: 32px;
  }
}

.kella-address-form__response {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  font-family: "Nunito Sans", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #dc3232;
}

.kella-address-form__response[hidden] {
  display: none;
}

.kella-address-field-wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.kella-address-field-tip {
  margin-top: 4px;
  font-family: "Nunito Sans", sans-serif;
  font-size: 13px;
  line-height: 1.4;
  color: #dc3232;
}

.kella-address-field-tip[hidden] {
  display: none;
}

.kella-address-field.kella-address-field--invalid {
  border-color: #dc3232;
}

@keyframes kella-spin {
  to {
    transform: rotate(360deg);
  }
}

.kella-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgb(0 0 0 / 15%);
  border-top-color: #333333;
  border-radius: 50%;
  animation: kella-spin 0.65s linear infinite;
}

.kella-spinner--light {
  border-color: rgb(255 255 255 / 35%);
  border-top-color: #ffffff;
}

.kella-address-field-spinner {
  pointer-events: none;
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.kella-address-field-spinner[hidden] {
  display: none;
}

.kella-address-field-wrap.is-ward-loading .kella-address-select-chevron {
  display: none;
}

.kella-address-field-wrap.is-ward-loading [data-kella-vn-ward] {
  color: #6b7280;
}

.kella-address-field-wrap.is-ward-loading .select2-selection__rendered {
  color: #6b7280;
}

.kella-address-field-wrap.is-ward-loading .select2-selection__arrow {
  opacity: 0;
}

/* VN address Select2 */
.select2-container {
  box-sizing: border-box;
  display: block;
  margin: 0;
  position: relative;
  vertical-align: middle;
}

.select2-hidden-accessible {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  white-space: nowrap !important;
  width: 1px !important;
}

.select2-dropdown {
  background-color: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-sizing: border-box;
  display: block;
  position: absolute;
  left: -100000px;
  width: 100%;
  z-index: 100000;
}

.select2-container--open .select2-dropdown {
  left: 0;
}

.select2-search--dropdown {
  display: block;
  padding: 8px;
}

.select2-search--dropdown .select2-search__field {
  width: 100%;
  box-sizing: border-box;
}

.select2-results {
  display: block;
}

.select2-results__options {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 260px;
  overflow-y: auto;
}

.kella-vn-select-wrap .select2-container,
.kella-vn-select2 + .select2-container {
  width: 100% !important;
}

.kella-vn-select-wrap .select2-container .select2-selection--single,
.kella-vn-select2 + .select2-container .select2-selection--single {
  height: auto;
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: 8px;
  background-color: #f3f3f5;
}

.kella-vn-select-wrap .select2-container .select2-selection__rendered,
.kella-vn-select2 + .select2-container .select2-selection__rendered {
  padding: 10px 40px 10px 16px;
  font-family: "Nunito Sans", sans-serif;
  font-size: 16px;
  line-height: 1.4;
  color: #000;
}

.kella-vn-select-wrap .select2-container .select2-selection__placeholder,
.kella-vn-select2 + .select2-container .select2-selection__placeholder {
  color: rgb(0 0 0 / 50%);
}

.kella-vn-select-wrap .select2-container .select2-selection__arrow,
.kella-vn-select2 + .select2-container .select2-selection__arrow {
  top: 50%;
  right: 12px;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
}

.kella-vn-select-wrap .select2-container .select2-selection__arrow b,
.kella-vn-select2 + .select2-container .select2-selection__arrow b {
  display: none;
}

.kella-vn-select-wrap .select2-container .select2-selection__arrow::after,
.kella-vn-select2 + .select2-container .select2-selection__arrow::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 3px;
  width: 8px;
  height: 8px;
  border-right: 2px solid #000;
  border-bottom: 2px solid #000;
  transform: rotate(45deg);
}

.checkout.woocommerce-checkout .kella-vn-select-wrap .select2-container .select2-selection--single,
.checkout.woocommerce-checkout .kella-vn-select2 + .select2-container .select2-selection--single {
  height: 50px;
  min-height: 50px;
}

.checkout.woocommerce-checkout .kella-vn-select-wrap .select2-container .select2-selection__rendered,
.checkout.woocommerce-checkout .kella-vn-select2 + .select2-container .select2-selection__rendered {
  padding-top: 12px;
  padding-bottom: 12px;
}

.kella-vn-select-wrap .select2-container.select2-container--focus .select2-selection--single,
.kella-vn-select-wrap .select2-container.select2-container--open .select2-selection--single,
.kella-vn-select2 + .select2-container.select2-container--focus .select2-selection--single,
.kella-vn-select2 + .select2-container.select2-container--open .select2-selection--single {
  border-color: #d1d5db;
  outline: none;
}

.select2-container.kella-address-field--invalid .select2-selection--single {
  border-color: #dc3232;
}

.select2-container--open .select2-dropdown .select2-search__field {
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 8px 10px;
  font-family: "Nunito Sans", sans-serif;
  font-size: 14px;
}

.select2-container--open .select2-results__option {
  padding: 10px 12px;
  font-family: "Nunito Sans", sans-serif;
  font-size: 15px;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
  background-color: #333;
  color: #fff;
}

.relative:has(.select2-hidden-accessible) > .pointer-events-none,
.relative:has(.select2-hidden-accessible) > .kella-address-select-chevron,
.checkout.woocommerce-checkout .kella-checkout-select-wrap:has(.select2-hidden-accessible) .woocommerce-input-wrapper::after {
  display: none;
}

.kella-address-submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.kella-address-submit-spinner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.kella-address-submit-spinner[hidden] {
  display: none;
}

@media (max-width: 767.9px) {
  .kella-address-dialog__inner {
    padding: 24px 20px;
    gap: 24px;
  }
}

/* Cart page — table layout without WC default styles */
#kella-cart-page-form table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

#kella-cart-page-form .woocommerce-cart-form__contents {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.kella-cart-empty {
  padding-top: 48px;
}

main.kella-cart-page--empty {
  padding-bottom: 75px;
}

@media (min-width: 1024px) {
  .kella-cart-empty {
    padding-top: 60px;
  }
}

/* Checkout */
.checkout.woocommerce-checkout .woocommerce-billing-fields__field-wrapper {
  width: 100%;
}

.checkout.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row,
.checkout.woocommerce-checkout .woocommerce-billing-fields > .form-row {
  margin: 0;
  float: none;
  clear: none;
  width: auto;
}

.checkout.woocommerce-checkout .form-row.hidden,
.checkout.woocommerce-checkout .woocommerce-shipping-fields.hidden,
.checkout.woocommerce-checkout .woocommerce-additional-fields.hidden {
  display: none !important;
}

.kella-checkout-place-order-wrap--desktop {
  display: none;
}

@media (min-width: 1024px) {
  .kella-checkout-place-order-wrap--desktop {
    display: flex;
    justify-content: center;
    margin-top: 24px;
  }

  .kella-checkout-place-order-wrap--mobile {
    display: none !important;
  }
}

.checkout.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row-first,
.checkout.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row-last,
.checkout.woocommerce-checkout #billing_first_name_field,
.checkout.woocommerce-checkout #billing_last_name_field {
  grid-column: span 1;
}

.checkout.woocommerce-checkout #billing_phone_field,
.checkout.woocommerce-checkout #billing_email_field,
.checkout.woocommerce-checkout #billing_state_field,
.checkout.woocommerce-checkout #billing_city_field,
.checkout.woocommerce-checkout #billing_address_1_field,
.checkout.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row-wide,
.checkout.woocommerce-checkout .woocommerce-account-fields,
.checkout.woocommerce-checkout .woocommerce-billing-fields > .col-span-2 {
  grid-column: span 2;
}

.checkout.woocommerce-checkout .woocommerce-billing-fields__field-wrapper label,
.checkout.woocommerce-checkout .woocommerce-input-wrapper > label {
  display: none;
}

.checkout.woocommerce-checkout .form-row .woocommerce-input-wrapper {
  width: 100%;
}

.checkout.woocommerce-checkout .form-row input.input-text,
.checkout.woocommerce-checkout .form-row select {
  width: 100%;
}

.checkout.woocommerce-checkout .kella-checkout-select-wrap .woocommerce-input-wrapper {
  position: relative;
}

.checkout.woocommerce-checkout .kella-checkout-select-wrap .woocommerce-input-wrapper::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid #000;
  border-bottom: 2px solid #000;
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

.checkout.woocommerce-checkout .kella-checkout-payment .wc_payment_methods {
  list-style: none;
  margin: 0;
  padding: 0;
}

.checkout.woocommerce-checkout .kella-checkout-payment .payment_box {
  background: transparent;
  padding: 0;
}

.checkout.woocommerce-checkout .woocommerce-privacy-policy-text,
.checkout.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
  display: none;
}

/* Order notes checkbox — FE uses peer-checked classes not in Tailwind build */
.kella-order-notes .kella-order-notes-panel {
  display: grid;
  grid-template-rows: 0fr;
  margin-top: 0;
  opacity: 0;
  overflow: hidden;
  transition: grid-template-rows 0.3s ease, opacity 0.3s ease, margin-top 0.3s ease;
}

.kella-order-notes:has(#kella-order-note-check:checked) .checkbox {
  background-color: #000;
  border-color: #000;
}

.kella-order-notes:has(#kella-order-note-check:checked) .checkbox svg {
  opacity: 1;
}

.kella-order-notes:has(#kella-order-note-check:checked) .kella-order-notes-panel {
  grid-template-rows: 1fr;
  margin-top: 16px;
  opacity: 1;
}

.kella-checkout-notices:empty {
  display: none;
  margin: 0;
}

.checkout.woocommerce-checkout .woocommerce-NoticeGroup-checkout {
  display: none !important;
}

.kella-checkout-notices .kella-checkout-global-error {
  margin: 0;
  padding: 14px 16px;
  border: 1px solid #f48fb1;
  border-radius: 8px;
  background-color: #fce4ec;
  color: #c62828;
  font-family: "Nunito Sans", sans-serif;
  font-size: 14px;
  line-height: 150%;
}

.checkout.woocommerce-checkout .checkout-inline-error-message,
.checkout.woocommerce-checkout .kella-checkout-section-error {
  margin: 6px 0 0;
  font-family: "Nunito Sans", sans-serif;
  font-size: 13px;
  line-height: 140%;
  color: #c62828;
}

.checkout.woocommerce-checkout .form-row.woocommerce-invalid input.input-text,
.checkout.woocommerce-checkout .form-row.woocommerce-invalid select,
.checkout.woocommerce-checkout .form-row.woocommerce-invalid textarea {
  border-color: #e57373 !important;
  background-color: #fff8f8;
}

.checkout.woocommerce-checkout .form-row.woocommerce-invalid.kella-checkout-select-wrap .woocommerce-input-wrapper::after {
  border-right-color: #c62828;
  border-bottom-color: #c62828;
}

.kella-checkout-coupon-error:not([hidden]) {
  margin-bottom: 16px;
}

.kella-checkout-coupon-error .woocommerce-error,
.kella-checkout-coupon-error .woocommerce-message,
.kella-checkout-coupon-error .woocommerce-info {
  margin: 0;
}

.kella-checkout-coupon-error .woocommerce-error {
  color: #c62828;
  font-family: "Nunito Sans", sans-serif;
  font-size: 13px;
  line-height: 1.4;
  background-color: #fce4ec;
  border: 1px solid #f48fb1;
  border-radius: 8px;
  padding: 12px 16px;
}

.checkout.woocommerce-checkout .woocommerce-error,
.checkout.woocommerce-checkout .woocommerce-info,
.checkout.woocommerce-checkout .woocommerce-message {
  margin-bottom: 0;
}

.kella-wishlist-toggle--card,
.kella-wishlist-toggle--pdp {
  color: #deb653;
}

.kella-wishlist-toggle--card.kella-btn-loading {
  position: absolute;
  top: 0;
  right: 0;
}

.kella-wishlist-active svg path {
  fill: currentColor;
}

.kella-wishlist-card--removing {
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.kella-btn-loading {
  pointer-events: none;
  cursor: wait;
}

.kella-btn-loading > :not(.kella-btn-spinner) {
  opacity: 0.2;
}

[data-add-to-cart],
[data-buy-now] {
  position: relative;
}

.kella-wishlist-toggle--pdp {
  position: relative;
}

.kella-btn-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: kella-spin 0.55s linear infinite;
  z-index: 2;
  pointer-events: none;
}

.kella-wishlist-toggle--card .kella-btn-spinner {
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
}

@keyframes kella-spin {
  to {
    transform: rotate(360deg);
  }
}

.kella-toast-root {
  position: fixed;
  top: 112px;
  right: 16px;
  z-index: 10050;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(360px, calc(100vw - 32px));
  pointer-events: none;
}

@media (min-width: 1024px) {
  .kella-toast-root {
    top: 136px;
    right: 24px;
  }
}

.kella-toast {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 8px;
  background: #0d0d0d;
  color: #fff;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-family: "Nunito Sans", sans-serif;
  font-size: 14px;
  line-height: 1.45;
  opacity: 0;
  transform: translateY(-8px) scale(0.98);
  transition: opacity 0.28s ease, transform 0.28s ease;
}

.kella-toast.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.kella-toast--success .kella-toast__icon {
  color: #deb653;
}

.kella-toast--error .kella-toast__icon {
  color: #cb2d0f;
}

.kella-toast__icon {
  flex-shrink: 0;
  display: inline-flex;
  margin-top: 1px;
}

.kella-toast__message {
  flex: 1;
}

#kella-cart-page-form.kella-cart--busy {
  position: relative;
}

#cart-panel.kella-cart--busy::after,
#kella-cart-page-form.kella-cart--busy::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.72);
  z-index: 30;
  cursor: wait;
}

#cart-panel.kella-cart--busy::before,
#kella-cart-page-form.kella-cart--busy::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 32px;
  margin: -16px 0 0 -16px;
  border: 3px solid #deb653;
  border-top-color: transparent;
  border-radius: 50%;
  animation: kella-spin 0.55s linear infinite;
  z-index: 31;
  pointer-events: none;
}

#cart-panel.kella-cart--busy,
#kella-cart-page-form.kella-cart--busy {
  pointer-events: none;
}

body.kella-buy-now--busy {
  overflow: hidden;
}

body.kella-buy-now--busy::after {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.72);
  z-index: 10040;
  cursor: wait;
}

body.kella-buy-now--busy::before {
  content: "";
  position: fixed;
  top: 50%;
  left: 50%;
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
  border: 3px solid #deb653;
  border-top-color: transparent;
  border-radius: 50%;
  animation: kella-spin 0.55s linear infinite;
  z-index: 10041;
  pointer-events: none;
}

.kella-filter-option.active,
.kella-sort-option.active {
  color: #c49a45 !important;
}

#mobile-filter-drawer .kella-filter-option.active {
  background-color: #f9f9f9 !important;
  font-weight: 700 !important;
}