/* ============================================================
   HÒA CƯỜNG M&E — Phase 3: Product card v2, PDP sticky form,
                              policy strip, modals, microinteractions
   ============================================================ */

/* ============================================================
   1. PRODUCT CARD V2 — restyle existing .product-small
   ============================================================ */
.archive .product-small,
.category-section .product-small {
  background: var(--hc-white) !important;
  border-radius: var(--hc-r-md) !important;
  overflow: hidden;
  transition: transform var(--hc-tr-base), box-shadow var(--hc-tr-base) !important;
  border: 1px solid var(--hc-gray-200);
  position: relative;
}
.archive .product-small:hover,
.category-section .product-small:hover {
  transform: translateY(-4px);
  box-shadow: var(--hc-sh-3) !important;
  border-color: var(--hc-gray-300);
}
.archive .product-small .col-inner,
.category-section .product-small .col-inner {
  padding-bottom: 0 !important;
}

/* Image square ratio + overlay hover */
.archive .product-small .box-image,
.category-section .product-small .box-image {
  background: var(--hc-gray-50);
  overflow: hidden;
  position: relative;
}

.archive .product-small .box-image::after,
.category-section .product-small .box-image::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(13,77,140,0.08) 100%);
  opacity: 0; transition: opacity var(--hc-tr-base);
  pointer-events: none;
}
.archive .product-small:hover .box-image::after,
.category-section .product-small:hover .box-image::after {
  opacity: 1;
}

/* Box text */
.archive .product-small .box-text,
.category-section .product-small .box-text {
  padding: var(--hc-sp-3) var(--hc-sp-3) var(--hc-sp-4) !important;
}
.archive .product-small .product-title a,
.category-section .product-small .product-title a {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--hc-gray-900) !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 38px;
  line-height: 1.35;
}
.archive .product-small .product-title a:hover,
.category-section .product-small .product-title a:hover {
  color: var(--hc-navy) !important;
}

/* Badge "Chính hãng" — inject by JS */
.hc-card-badge {
  position: absolute; top: var(--hc-sp-2); left: var(--hc-sp-2);
  background: var(--hc-orange);
  color: var(--hc-white);
  font-size: 10px; font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 8px;
  border-radius: var(--hc-r-sm);
  z-index: 5;
  pointer-events: none;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* CTA button — inject by JS, replaces wishlist */
.hc-card-cta {
  display: block !important;
  width: 100%;
  padding: 10px var(--hc-sp-3) !important;
  background: var(--hc-orange) !important;
  color: var(--hc-white) !important;
  text-align: center !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  border-radius: var(--hc-r-md) !important;
  text-decoration: none !important;
  margin-top: var(--hc-sp-2);
  transition: all var(--hc-tr-base);
  border: none;
  cursor: pointer;
}
.hc-card-cta:hover {
  background: var(--hc-orange-dark) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255,106,0,0.3);
  color: var(--hc-white) !important;
}

/* Hide YITH wishlist UI on cards (replaced by CTA) */
.archive .product-small .yith-wcwl-add-to-wishlist,
.category-section .product-small .yith-wcwl-add-to-wishlist,
.archive .product-small .yith-wcwl-add-button,
.category-section .product-small .yith-wcwl-add-button {
  display: none !important;
}

/* Quick view button — inject by JS on hover (desktop) */
.hc-quick-view {
  position: absolute; bottom: var(--hc-sp-3); left: 50%;
  transform: translate(-50%, 12px);
  background: var(--hc-white);
  color: var(--hc-navy);
  border: 1px solid var(--hc-navy);
  font-weight: 600; font-size: 12px;
  padding: 6px 14px;
  border-radius: var(--hc-r-full);
  text-decoration: none !important;
  opacity: 0;
  transition: all var(--hc-tr-base);
  pointer-events: none;
  white-space: nowrap;
  z-index: 6;
  cursor: pointer;
}
.archive .product-small:hover .hc-quick-view,
.category-section .product-small:hover .hc-quick-view {
  opacity: 1; transform: translate(-50%, 0);
  pointer-events: auto;
}
.hc-quick-view:hover {
  background: var(--hc-navy);
  color: var(--hc-white);
}
@media (max-width: 767px) { .hc-quick-view { display: none; } }

/* ============================================================
   2. PDP STICKY FORM — bên phải product detail
   ============================================================ */
.hc-pdp-quote {
  position: relative;
  background: var(--hc-white);
  border: 1px solid var(--hc-gray-200);
  border-radius: var(--hc-r-lg);
  box-shadow: var(--hc-sh-2);
  padding: var(--hc-sp-4);
  margin: var(--hc-sp-4) 0;
}
.hc-pdp-quote-header {
  display: flex; align-items: center; gap: var(--hc-sp-2);
  margin-bottom: var(--hc-sp-3);
  padding-bottom: var(--hc-sp-3);
  border-bottom: 2px solid var(--hc-orange);
}
.hc-pdp-quote-icon {
  width: 36px; height: 36px;
  background: var(--hc-orange);
  color: var(--hc-white);
  border-radius: var(--hc-r-md);
  display: flex; align-items: center; justify-content: center;
}
.hc-pdp-quote-icon svg { width: 20px; height: 20px; stroke: white; fill: none; stroke-width: 2; }
.hc-pdp-quote-title {
  font-size: 16px; font-weight: 700;
  color: var(--hc-navy); margin: 0;
  line-height: 1.3;
}
.hc-pdp-quote-sub {
  font-size: 12px; color: var(--hc-gray-500);
  margin: 0;
}
.hc-pdp-form {
  display: flex; flex-direction: column; gap: var(--hc-sp-3);
}
.hc-field {
  display: flex; flex-direction: column; gap: 6px;
}
.hc-field label {
  font-size: 12px; font-weight: 600;
  color: var(--hc-gray-700);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.hc-field input {
  padding: 10px 12px;
  font-size: 15px !important;
  border: 1.5px solid var(--hc-gray-300) !important;
  border-radius: var(--hc-r-md) !important;
  background: var(--hc-white);
  transition: border-color var(--hc-tr-base), box-shadow var(--hc-tr-base);
  box-shadow: none !important;
}
.hc-field input:focus {
  outline: none;
  border-color: var(--hc-navy) !important;
  box-shadow: 0 0 0 3px rgba(13,77,140,0.12) !important;
}
.hc-field-error {
  color: #dc2626; font-size: 12px;
}
.hc-submit-btn {
  background: var(--hc-orange) !important;
  color: var(--hc-white) !important;
  padding: 12px 20px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  border: none !important;
  border-radius: var(--hc-r-md) !important;
  cursor: pointer;
  transition: all var(--hc-tr-base);
  width: 100%;
  margin: 0 !important;
}
.hc-submit-btn:hover {
  background: var(--hc-orange-dark) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255,106,0,0.3);
}
.hc-quote-alt {
  display: flex; gap: var(--hc-sp-2);
  margin-top: var(--hc-sp-3);
  padding-top: var(--hc-sp-3);
  border-top: 1px dashed var(--hc-gray-200);
}
.hc-quote-alt a {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  gap: 6px;
  padding: 10px var(--hc-sp-2);
  border-radius: var(--hc-r-md);
  text-decoration: none;
  font-size: 13px; font-weight: 600;
  transition: all var(--hc-tr-base);
}
.hc-quote-alt .hc-zalo-link {
  background: var(--hc-zalo); color: var(--hc-white);
}
.hc-quote-alt .hc-tel-link {
  background: var(--hc-navy); color: var(--hc-white);
}
.hc-quote-alt a:hover { transform: translateY(-1px); opacity: 0.92; }
.hc-quote-alt a svg { width: 16px; height: 16px; fill: currentColor; }

/* Success state */
.hc-pdp-quote.success .hc-pdp-form,
.hc-pdp-quote.success .hc-quote-alt { display: none; }
.hc-pdp-quote-success {
  display: none;
  text-align: center; padding: var(--hc-sp-4) 0;
}
.hc-pdp-quote.success .hc-pdp-quote-success { display: block; }
.hc-success-icon {
  width: 56px; height: 56px;
  background: #22c55e;
  border-radius: 50%;
  margin: 0 auto var(--hc-sp-3);
  display: flex; align-items: center; justify-content: center;
}
.hc-success-icon svg { width: 28px; height: 28px; stroke: white; fill: none; stroke-width: 3; }
.hc-success-title {
  font-size: 18px; font-weight: 700;
  color: var(--hc-gray-900);
  margin: 0 0 var(--hc-sp-1);
}
.hc-success-desc {
  font-size: 14px; color: var(--hc-gray-700);
  margin: 0 0 var(--hc-sp-3);
}

/* ============================================================
   3. POLICY ICON STRIP — dưới CTA PDP
   ============================================================ */
.hc-policy-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--hc-sp-2);
  margin: var(--hc-sp-4) 0;
}
@media (max-width: 549px) {
  .hc-policy-strip { grid-template-columns: repeat(2, 1fr); }
}
.hc-policy-item {
  text-align: center;
  padding: var(--hc-sp-3) var(--hc-sp-2);
  background: var(--hc-gray-50);
  border-radius: var(--hc-r-md);
  border: 1px solid var(--hc-gray-100);
}
.hc-policy-icon {
  width: 32px; height: 32px;
  margin: 0 auto var(--hc-sp-2);
  color: var(--hc-navy);
}
.hc-policy-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; }
.hc-policy-label {
  font-size: 12px; font-weight: 600;
  color: var(--hc-gray-700);
  line-height: 1.3;
}

/* ============================================================
   4. QUICK VIEW MODAL
   ============================================================ */
.hc-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(17,24,39,.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 100000;
  display: none;
  align-items: center; justify-content: center;
  padding: var(--hc-sp-4);
  overflow-y: auto;
}
.hc-modal-backdrop.open { display: flex; }
.hc-modal {
  background: var(--hc-white);
  border-radius: var(--hc-r-lg);
  max-width: 760px; width: 100%;
  max-height: 90vh;
  overflow: hidden;
  position: relative;
  box-shadow: var(--hc-sh-4);
  animation: hcSlideUp .25s ease-out;
}
@keyframes hcSlideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.hc-modal-close {
  position: absolute; right: var(--hc-sp-3); top: var(--hc-sp-3);
  width: 36px; height: 36px;
  background: var(--hc-white);
  border: 1px solid var(--hc-gray-200);
  border-radius: 50%;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 10;
  transition: all var(--hc-tr-base);
  font-size: 20px;
}
.hc-modal-close:hover { background: var(--hc-gray-100); transform: rotate(90deg); }
.hc-modal-iframe {
  width: 100%; height: 70vh; border: 0;
}
.hc-modal-loading {
  padding: var(--hc-sp-12);
  text-align: center;
  color: var(--hc-gray-500);
}

/* ============================================================
   5. LOADING SKELETON SHIMMER
   ============================================================ */
.hc-skeleton, .lazy-load:not(.loaded) {
  background: linear-gradient(90deg,
    var(--hc-gray-100) 0%,
    var(--hc-gray-200) 50%,
    var(--hc-gray-100) 100%);
  background-size: 200% 100%;
  animation: hcShimmer 1.4s ease-in-out infinite;
}
@keyframes hcShimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hc-skeleton, .lazy-load:not(.loaded) { animation: none; background: var(--hc-gray-100); }
}

/* ============================================================
   6. MICROINTERACTIONS — focus ring, hover transitions
   ============================================================ */
a, button, input[type="submit"], input[type="button"] {
  transition: color var(--hc-tr-fast), background-color var(--hc-tr-fast),
              border-color var(--hc-tr-fast), box-shadow var(--hc-tr-fast),
              transform var(--hc-tr-fast);
}
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid rgba(255,106,0,0.5) !important;
  outline-offset: 2px !important;
}

/* ============================================================
   7. SCROLL-TO-TOP — injected by JS
   ============================================================ */
.hc-scroll-top {
  position: fixed; left: 16px; bottom: 80px;
  width: 44px; height: 44px;
  background: var(--hc-navy);
  color: var(--hc-white);
  border: 0; border-radius: 50%;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--hc-sh-2);
  opacity: 0; pointer-events: none;
  transform: translateY(8px);
  transition: all var(--hc-tr-base);
  z-index: 9996;
}
.hc-scroll-top.visible {
  opacity: 1; pointer-events: auto;
  transform: translateY(0);
}
.hc-scroll-top:hover {
  background: var(--hc-navy-dark);
  transform: translateY(-2px);
}
.hc-scroll-top svg { width: 20px; height: 20px; fill: currentColor; }

@media (min-width: 768px) {
  .hc-scroll-top { left: auto; right: 86px; bottom: 24px; }
}

/* ============================================================
   8. PDP — improvement layout polish
   ============================================================ */
body.single-product .product-main { padding: var(--hc-sp-6) 0 !important; }
body.single-product .product-info h1.product-title {
  font-size: clamp(1.375rem, 3vw, 1.75rem) !important;
  line-height: 1.25 !important;
  margin-bottom: var(--hc-sp-3) !important;
}
body.single-product .product-info .price ins span,
body.single-product .product-info .price .amount {
  color: var(--hc-orange) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
}
body.single-product .product-tabs li a {
  background: var(--hc-gray-100) !important;
  color: var(--hc-gray-700) !important;
  border-radius: var(--hc-r-md) var(--hc-r-md) 0 0 !important;
  font-size: 14px !important;
}
body.single-product .product-tabs li.active a {
  background: var(--hc-navy) !important;
  color: var(--hc-white) !important;
}

/* ============================================================
   9. Anti-collision tweaks
   ============================================================ */
/* Tránh sticky CTA mobile che PDP nội dung khi scroll cuối */
body.single-product { scroll-padding-bottom: 80px; }