/* ==========================================================================
   PECB Skills — Page-specific styles
   Layouts for: landing, product, cart, checkout, thank-you, payment-failed
   ========================================================================== */

/* ----------  Store Skeletons  ---------- */
.pecb-skills .skel{
  display: block;
  border-radius: var(--radius-md);
  background: linear-gradient(90deg, rgba(0,0,0,0.06) 25%, rgba(0,0,0,0.10) 37%, rgba(0,0,0,0.06) 63%);
  background-size: 400% 100%;
  animation: pecb-skel-shimmer 1.4s ease infinite;
}
.pecb-skills .skel--badge{ width: 120px; height: 32px; border-radius: var(--radius-pill); margin-bottom: var(--space-4); }
.pecb-skills .skel--title{ width: 80%; height: 2.25rem; margin-bottom: var(--space-4); }
.pecb-skills .skel--text{ width: 100%; height: 1rem; margin-bottom: 0.5rem; }
.pecb-skills .skel--text-sm{ width: 55%; }
.pecb-skills .skel--price{ width: 140px; height: 2rem; margin-block: var(--space-5); }
.pecb-skills .skel--chips{ width: 220px; max-width: 100%; height: 38px; margin-bottom: var(--space-5); border-radius: var(--radius-pill); }
.pecb-skills .skel--btns{ width: 280px; max-width: 100%; height: 48px; }
.pecb-skills .skel--art{ width: 100%; height: 100%; border-radius: var(--radius-xl); }
/* Fill an aspect-ratio box (e.g. the product gallery main image). */
.pecb-skills .skel--fill{ width: 100%; height: 100%; }
/* Cart row skeleton: thumbnail + two text lines, matching .cart-row rhythm. */
.pecb-skills .cart-skel-row{
  display: grid;
  grid-template-columns: 76px 1fr;
  grid-template-rows: auto auto;
  column-gap: var(--space-4);
  row-gap: var(--space-2);
  align-items: center;
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--color-border);
}
.pecb-skills .cart-skel-row .skel--thumb{ grid-row: 1 / span 2; width: 76px; height: 76px; }
.pecb-skills .cart-skel-row .skel--line{ width: 70%; height: 1.1rem; }
.pecb-skills .cart-skel-row .skel--line-sm{ width: 40%; height: 0.9rem; }
@keyframes pecb-skel-shimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .pecb-skills .skel{ animation: none; }
}

/* ----------  Store toolbar (search + filters)  ---------- */
.pecb-skills .store-intro{ text-align: center; max-width: 680px; margin: 0 auto var(--space-6); }
.pecb-skills .store-intro h1{ font-size: var(--fs-2xl); }
.pecb-skills .store-intro p{ color: var(--color-text-muted); margin-top: var(--space-3); }

.pecb-skills .search-bar{
  display: flex;
  max-width: 560px;
  margin: 0 auto var(--space-6);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 0.35rem 0.35rem 0.35rem 1.25rem;
  align-items: center;
  gap: var(--space-3);
  box-shadow: var(--shadow-sm);
}
.pecb-skills .search-bar input{ flex: 1; border: none; outline: none; background: transparent; font-size: var(--fs-sm); }
.pecb-skills .search-bar button{
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border: none; border-radius: var(--radius-pill);
  background: var(--color-accent); color: #fff; cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.pecb-skills .search-bar button:hover{ background: var(--color-accent-dark); }
.pecb-skills .search-bar .icon{ width: 18px; height: 18px; }

.pecb-skills .store-toolbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}
.pecb-skills .filter-tabs{ display: flex; gap: var(--space-2); flex-wrap: wrap; }
.pecb-skills .filter-tab{
  padding: 0.5rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--color-text-muted);
  background: transparent;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.pecb-skills .filter-tab:hover{ background: var(--color-bg-soft); }
.pecb-skills .filter-tab.is-active{ background: var(--color-bg-alt); color: var(--color-ink); font-weight: 600; }

.pecb-skills .sort-select{
  padding: 0.5rem 1rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  background: var(--color-surface);
  cursor: pointer;
}

/* Pagination */
.pecb-skills .pagination{ display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-7); }
.pecb-skills .pagination button{
  min-width: 38px; height: 38px;
  display: grid; place-items: center;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.pecb-skills .pagination button:hover{ border-color: var(--color-border-strong); }
.pecb-skills .pagination button.is-active{ background: var(--color-ink); color: #fff; border-color: var(--color-ink); }

/* ----------  Single Product  ---------- */
.pecb-skills .product-hero{ background: var(--color-bg-alt); border-radius: var(--radius-md); }
.pecb-skills .product-hero__inner{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
  padding-block: var(--space-9);
  align-items: start;
}

.pecb-skills .gallery { margin: auto 0; }
.pecb-skills .gallery__main{
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
  position: relative;
}
.pecb-skills .gallery__main img{ width: 100%; height: 100%; object-fit: cover; max-height: 320px;}
.pecb-skills .gallery__category-badge{
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 1;
    color: #000;
    border-radius: 8px;
    padding: 0.5rem 1rem;
    font-size: var(--fs-sm);
    font-weight: 500;
    line-height: 1.4;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.25);
    border: 1px solid #fff;
    backdrop-filter: blur(2.5px);
}
}
.pecb-skills .gallery__thumbs{ display: flex; gap: var(--space-3); margin-top: var(--space-3); }
.pecb-skills .gallery__thumb{
  width: 72px; height: 72px; border-radius: var(--radius-md);
  overflow: hidden; cursor: pointer; border: 2px solid transparent;
  background: var(--color-surface);
  transition: border-color var(--dur) var(--ease);
}
.pecb-skills .gallery__thumb.is-active{ border-color: var(--color-accent); }
.pecb-skills .gallery__thumb img{ width: 100%; height: 100%; object-fit: cover; }

.pecb-skills .product-info { margin: auto 0; }
.pecb-skills .product-info h1{ font-size: var(--fs-3xl); }
.pecb-skills .product-info__sub{ color: var(--color-text-muted); margin-top: var(--space-2); }
.pecb-skills .product-info__price{ align-items: baseline; gap: var(--space-3); margin-block: var(--space-4); }
.pecb-skills .product-info__price .now{ font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 500; color: var(--color-accent); }

.pecb-skills .lang-options{ margin-block: var(--space-4); }
.pecb-skills .lang-options > span{ display: block; font-size: var(--fs-sm); color: #CBD5E1; margin-bottom: var(--space-2); }
.pecb-skills .lang-chips{ display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pecb-skills .lang-chip{
  padding: 0.4rem 0.9rem; border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-border); background: var(--color-surface);
  font-size: var(--fs-sm); cursor: pointer; transition: all var(--dur) var(--ease);
}
.pecb-skills .lang-chip.is-active{ background: var(--color-ink); color: #fff; border-color: var(--color-ink); }

.pecb-skills .qty{
  display: inline-flex; align-items: center;
  border: 1.5px solid var(--color-border); border-radius: var(--radius-md);
  overflow: hidden;
}
.pecb-skills .qty button{ width: 38px; height: 40px; border: none; background: var(--color-surface); cursor: pointer; font-size: var(--fs-md); color: var(--color-text-muted); }
.pecb-skills .qty button:hover{ background: var(--color-bg-soft); }
.pecb-skills .qty input{ width: 48px; height: 40px; text-align: center; border: none; border-inline: 1.5px solid var(--color-border); outline: none; -moz-appearance: textfield; }
.pecb-skills .qty input::-webkit-outer-spin-button, .pecb-skills .qty input::-webkit-inner-spin-button{ -webkit-appearance: none; }

.pecb-skills .product-actions{ display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; flex-direction: row;}

.pecb-skills .product-section{ padding-block: var(--space-9); }
.pecb-skills .product-section h2{ font-size: var(--fs-xl); margin-bottom: var(--space-4); }
.pecb-skills .spec-table{ width: 100%; border-collapse: collapse; }
.pecb-skills .spec-table th, .pecb-skills .spec-table td{ text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); font-size: var(--fs-sm); }
.pecb-skills .spec-table th{ color: var(--color-text-muted); font-weight: 500; width: 240px; }

.pecb-skills .tabs{ display: flex; gap: var(--space-5); border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-5); }
.pecb-skills .tab{ padding: var(--space-3) 0; font-weight: 600; color: var(--color-text-muted); border-bottom: 2px solid transparent; cursor: pointer; background: none; border-top: none; border-inline: none; }
.pecb-skills .tab.is-active{ color: var(--color-ink); border-bottom-color: var(--color-accent); }
.pecb-skills .tab-panel{ display: none; }
.pecb-skills .tab-panel.is-active{ display: block; }

/* reviews */
.pecb-skills .review{ padding: var(--space-5) 0; border-bottom: 1px solid var(--color-border); }
.pecb-skills .review__head{ display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); }
.pecb-skills .review__stars{ color: #f5b50a; letter-spacing: 1px; font-size: var(--fs-sm); }

.pecb-skills .carousel-head{ display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-5); }
.pecb-skills .carousel-nav{ display: flex; gap: var(--space-2); }

/* ----------  Cart  ---------- */
.pecb-skills .cart-layout{
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--space-7);
  align-items: start;
}

.pecb-skills .cart-layout:has(.empty-state) {
    grid-template-columns: 1fr!important;
}

.pecb-skills .cart-table-head{
  display: grid;
  grid-template-columns: 2.5fr 1fr 1fr 0.5fr;
  gap: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}
.pecb-skills .cart-row{
  display: grid;
  grid-template-columns: 2.5fr 1fr 1fr 0.5fr;
  gap: var(--space-4);
  align-items: center;
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--color-border);
}
.pecb-skills .cart-product{ display: flex; gap: var(--space-4); align-items: center; }
.pecb-skills .cart-product__img{ width: 76px; height: 76px; border-radius: var(--radius-md); overflow: hidden; background: var(--color-bg-alt); flex-shrink: 0; }
.pecb-skills .cart-product__img a{ display: block; width: 100%; height: 100%; }
.pecb-skills .cart-product__img img{ width: 100%; height: 100%; object-fit: cover; }
.pecb-skills .cart-product__title{ font-weight: 700; font-family: var(--font-display); }
.pecb-skills .cart-product__meta{ font-size: var(--fs-sm); color: var(--color-text-muted); }
.pecb-skills .cart-remove{ display: inline-flex; align-items: center; gap: var(--space-1); background: none; border: none; color: var(--color-accent); font-size: var(--fs-sm); cursor: pointer; padding: 0 !important; margin-top: var(--space-1); }
.pecb-skills .cart-remove .icon{ width: 1em; height: 1em; }
.pecb-skills .cart-remove:hover{ text-decoration: underline; }
.pecb-skills .cart-lang-change{ display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); }
.pecb-skills .cart-lang-change__label{ font-size: var(--fs-sm); color: var(--color-text-muted); white-space: nowrap; }
.pecb-skills .cart-lang-change__select{ font-size: var(--fs-sm) !important; border: 1.5px solid var(--color-border) !important; border-radius: var(--radius-sm) !important; padding: 0.2rem var(--space-2) !important; background: var(--color-bg) !important; color: var(--color-text) !important; cursor: pointer !important; }
.pecb-skills .cart-qty{ font-weight: 700; padding: 10px 24px !important;}
.pecb-skills .cart-price, .pecb-skills .cart-total-cell{ font-weight: 700; }
.pecb-skills .cart-total-cell{ color: var(--color-accent); }

.pecb-skills .cart-coupon{ display: flex; gap: var(--space-3); margin-top: var(--space-5); max-width: 460px; }
.pecb-skills .cart-coupon input{ flex: 1; }

.pecb-skills .summary-card{
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  position: sticky;
  top: calc(var(--header-h) + var(--space-4));
}
.pecb-skills .summary-card h2{ font-size: var(--fs-lg); margin-bottom: var(--space-4); }
.pecb-skills .summary-line{ display: flex; justify-content: space-between; padding-block: var(--space-2); font-size: var(--fs-sm); }
.pecb-skills .summary-line span:first-child{ color: var(--color-text-muted); }
.pecb-skills .summary-line strong{ font-weight: 700; }
.pecb-skills .summary-total{
  display: flex; justify-content: space-between; align-items: center;
  padding-top: var(--space-4); margin-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}
.pecb-skills .summary-total span{ font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md); }
.pecb-skills .summary-total strong{ font-family: var(--font-display); font-size: var(--fs-xl); color: var(--color-accent); }


.pecb-skills .checkout-badge-container {
  display: flex;  align-items: center; justify-content: flex-flex-start; gap: 8px;
  font-size: 12px; color: #8a9ba8;  padding-top: 20px;
}
.checkout-badge-container .badge-item { display: flex; align-items: center; gap: 4px;}
.checkout-badge-container .icon { width: 12px;  height: 12px;  stroke: #8a9ba8; }
.checkout-badge-container .divider { color: #cbd5e1;   font-weight: 300;}

.pecb-skills .empty-state{ text-align: center; padding: var(--space-9) var(--space-5); }
.pecb-skills .empty-state .icon{ width: 64px; height: 64px; color: var(--color-text-subtle); margin: 0 auto var(--space-4); }

/* ----------  Checkout  ---------- */
.pecb-skills .checkout-layout{
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: var(--space-7);
  align-items: start;
}
.pecb-skills .checkout-block h2{ font-size: var(--fs-lg); margin-bottom: var(--space-5); }
.pecb-skills .checkout-block__head{ display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-5); }
.pecb-skills .stripe-tag{ font-size: var(--fs-xs); color: #635bff; font-weight: 600; }

.pecb-skills .checkout-btn{
    display: flex;
    justify-content: space-between;
    align-content: center;
    flex-wrap: wrap;
    padding-top: 16px;
}
/* Any display rule above beats the UA's [hidden] rule, so hiding the step-1
   actions (and anything else the JS toggles with `hidden`) needs saying. */
.pecb-skills [hidden]{ display: none !important; }

.pecb-skills .checkout-btn .btn--block{
    width: fit-content !important;
    margin: 0px!important;
}

/* Consent checkbox (Customer License Agreement). The global input rule in
   style.css forces width:100% on text-like inputs; a checkbox must opt out of
   that, and of any theme rule doing the same, hence the !important. */
.pecb-skills .field--check{ display: flex; margin-top: var(--space-2); }
.pecb-skills .check{
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-text);
  margin-bottom: 0;
}
.pecb-skills .check input[type=checkbox]{
  width: auto !important;
  min-width: 0 !important;
  flex: 0 0 auto;
  margin: 2px 0 0 !important;
  padding: 0 !important;
  accent-color: var(--color-accent);
  cursor: pointer;
}


.pecb-skills .card-input-wrap{ position: relative; }
.pecb-skills .card-input-wrap .card-icons{ position: absolute; right: var(--space-3); top: 50%; transform: translateY(-50%); display: flex; gap: var(--space-2); color: var(--color-text-subtle); }

.pecb-skills .order-summary-card{
  background: var(--color-bg-soft);
    color: #000;
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: sticky;
  top: calc(var(--header-h) + var(--space-4));
}
.pecb-skills .order-summary-card__head{
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--space-5);
  border-bottom: 1px solid rgba(255,255,255,0.1);
   background: var(--color-ink);
}
.pecb-skills .order-summary-card__head h2{ color: #fff; font-size: var(--fs-md); }
.pecb-skills .order-summary-card__head span{ font-size: var(--fs-sm); color: #94a3b8; }
.pecb-skills .order-summary-card__body{ padding: var(--space-5); border: 1px solid var(--color-border); }
.pecb-skills .osc-item{ display: flex; align-items: center; gap: var(--space-3); padding-block: var(--space-3); }
.pecb-skills .osc-item__img{ width: 48px; height: 48px; border-radius: var(--radius-sm); overflow: hidden; background: rgba(255,255,255,0.1); flex-shrink: 0; }
.pecb-skills .osc-item__img img{ width: 100%; height: 100%; object-fit: cover; }
.pecb-skills .osc-item__title{ font-size: var(--fs-sm); font-weight: 600; }
.pecb-skills .osc-item__meta{ font-size: var(--fs-xs); color: #94a3b8; }
.pecb-skills .osc-item__price{ margin-left: auto; font-weight: 700; font-size: var(--fs-sm); }
.pecb-skills .osc-divider{ height: 1px; background: rgba(255,255,255,0.1); margin-block: var(--space-4); }
.pecb-skills .osc-line{ display: flex; justify-content: space-between; padding-block: var(--space-1); font-size: var(--fs-sm); color: #475569; }
.pecb-skills .osc-line strong{ color: #000; }
.pecb-skills .osc-total{ display: flex; justify-content: space-between; align-items: center; padding-top: var(--space-4); margin-top: var(--space-3); border-top: 1px solid rgba(255,255,255,0.1); }
.pecb-skills .osc-total span{ font-family: var(--font-display); font-weight: 700; }
.pecb-skills .osc-total strong{ font-family: var(--font-display); font-size: var(--fs-lg); color: #a11e29; }
/* Checkout loader: covers the form column while a step is in flight, so the
   visitor cannot double-submit and sees what is happening. */
.pecb-skills .checkout-main{ position: relative; }
.pecb-skills .checkout-loader{
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: var(--space-3); padding-top: 6rem;
  background: rgba(255,255,255,0.82); backdrop-filter: blur(1px);
  border-radius: var(--radius-lg);
  font-weight: 600; color: var(--color-ink);
}
.pecb-skills .checkout-loader[hidden]{ display: none; }
.pecb-skills .pecb-spinner{
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid rgba(15,23,42,0.12); border-top-color: var(--color-accent);
  animation: pecb-spin 0.8s linear infinite;
}
@keyframes pecb-spin { to { transform: rotate(360deg); } }
.pecb-skills .btn .pecb-spinner{ width: 18px; height: 18px; border-width: 2px; border-color: rgba(255,255,255,0.35); border-top-color: #fff; }

/* Step-2 (email code) inline error. */
.pecb-skills .checkout-error{
  margin: var(--space-3) 0; padding: var(--space-3) var(--space-4);
  background: #fef2f2; border: 1px solid #fecaca; border-radius: var(--radius-md);
  font-size: var(--fs-sm); color: #991b1b;
}
.pecb-skills .checkout-error[hidden]{ display: none; }
.pecb-skills .checkout-error ul{ margin: 0; padding-left: 1.1em; }
.pecb-skills .osc-secure{ margin-top: var(--space-5); padding: var(--space-4); background: rgba(255,255,255,0.05); border-radius: var(--radius-md); font-size: var(--fs-xs); color: #94a3b8;border: 1px solid var(--color-border); }
.pecb-skills .osc-secure strong{ color: #000; display: block; margin-bottom: var(--space-1); }

.pecb-skills .toggle-row{ display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); }
.pecb-skills .toggle{
  position: relative; width: 44px; height: 24px;
  background: var(--color-border-strong); border-radius: var(--radius-pill);
  cursor: pointer; transition: background var(--dur) var(--ease); border: none; flex-shrink: 0;
}
.pecb-skills .toggle::after{ content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: #fff; border-radius: 50%; transition: transform var(--dur) var(--ease); }
.pecb-skills .toggle[aria-checked="true"]{ background: var(--color-accent); }
.pecb-skills .toggle[aria-checked="true"]::after{ transform: translateX(20px); }

/* ----------  Thank You  ---------- */
.pecb-skills .confirm-wrap{ text-align: center; max-width: 900px; margin: 0 auto; }
.pecb-skills .confirm-icon{
  width: 96px; height: 96px; margin: 0 auto var(--space-5);
  display: grid; place-items: center;
  background: var(--color-success-soft); border-radius: 50%;
  animation: pop var(--dur) var(--ease);
}
.pecb-skills .confirm-icon .icon{ width: 48px; height: 48px; color: var(--color-success); }
@keyframes pop { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.pecb-skills .confirm-wrap h1{ font-size: var(--fs-2xl); }
.pecb-skills .confirm-wrap > p{ color: var(--color-text-muted); margin-top: var(--space-2); }
.pecb-skills .order-pill{
  display: inline-block; margin-top: var(--space-5);
  padding: var(--space-3) var(--space-5);
  background: var(--color-bg-soft); border: 1px solid var(--color-border);
  border-radius: var(--radius-pill); font-size: var(--fs-sm);
}
.pecb-skills .order-pill strong{ font-family: var(--font-display); }

.pecb-skills .order-card{
  text-align: left;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-top: var(--space-6);
}
.pecb-skills .order-card__head{
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--space-5); background: var(--color-ink); color: #fff;
}
.pecb-skills .order-card__head h2{ color: #fff; font-size: var(--fs-md); }
.pecb-skills .order-card__head span{ font-size: var(--fs-sm); color: #94a3b8; }
.pecb-skills .order-card__grid{ display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--space-6); padding: var(--space-5); }
.pecb-skills .order-label{ font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-subtle); margin-bottom: var(--space-3); }
.pecb-skills .order-item{ display: flex; align-items: center; gap: var(--space-3); padding-block: var(--space-3); }
.pecb-skills .order-item__img{ width: 44px; height: 44px; border-radius: var(--radius-sm); overflow: hidden; background: var(--color-bg-alt); flex-shrink: 0; }
.pecb-skills .order-item__img img{ width: 100%; height: 100%; object-fit: cover; }
.pecb-skills .order-item__title{ font-size: var(--fs-sm); font-weight: 600; }
.pecb-skills .order-item__meta{ font-size: var(--fs-xs); color: var(--color-text-muted); }
.pecb-skills .order-item__price{ margin-left: auto; font-weight: 700; font-size: var(--fs-sm); }
.pecb-skills .kv{ display: grid; grid-template-columns: auto 1fr; gap: 0 var(--space-5); font-size: var(--fs-sm); }
.pecb-skills .kv dt{ color: var(--color-text-muted); }
.pecb-skills .kv dd{ text-align: right; font-weight: 600; }
.pecb-skills .order-card__foot{
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--space-5); background: var(--color-bg-soft); border-top: 1px solid var(--color-border);
}
.pecb-skills .order-card__foot strong:last-child{ color: var(--color-accent); font-family: var(--font-display); font-size: var(--fs-md); }
.pecb-skills .order-card__sub{ padding: var(--space-3) var(--space-5); border-top: 1px solid var(--color-border); }
.pecb-skills .order-card__sub-line{ display: flex; justify-content: space-between; align-items: center; font-size: var(--fs-sm); padding-block: var(--space-1); color: var(--color-text-muted); }
.pecb-skills .order-card__sub-line strong{ color: var(--color-text); font-weight: 600; }

.pecb-skills .next-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); margin-top: var(--space-6); text-align: left; }
.pecb-skills .next-card{ padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-soft); }
.pecb-skills .next-card .icon{ width: 44px;height: 44px;margin-bottom: var(--space-3);color: var(--color-ink);background-color: #fff;padding: 8px;border-radius: 8px;border: 1px solid var(--color-border);}
.pecb-skills .next-card strong{ display: block; font-size: var(--fs-sm); margin-bottom: var(--space-1); }
.pecb-skills .next-card p{ font-size: var(--fs-xs); color: var(--color-text-muted); }

.pecb-skills .confirm-actions{ display: flex; justify-content: center; gap: var(--space-3); margin-top: var(--space-7); flex-wrap: wrap; }
.pecb-skills .confirm-actions .btn--outline{width: auto;}
/* ----------  Payment Failed  ---------- */
.pecb-skills .fail-icon{ background: #fee2e2; }
.pecb-skills .fail-icon .icon{ color: var(--color-danger); }
.pecb-skills .fail-reason{
  text-align: left; max-width: 480px; margin: var(--space-6) auto 0;
  padding: var(--space-4) var(--space-5);
  background: #fef2f2; border: 1px solid #fecaca; border-radius: var(--radius-md);
  font-size: var(--fs-sm); color: #991b1b;
}
.pecb-skills .fail-reason strong{ display: block; margin-bottom: var(--space-1); }

/* widget  */
.pecb-skills.pecb-competency-widget .lang-chip.is-active {
  clear: both !important;
    background: #64748B !important;
    color: #fff !important;
    border: none !important;
}

.pecb-competency-widget .pecb-skills .lang-chip {
    width: auto !important;
    cursor: pointer !important;
    color: #475569 !important;
    border-color: #94A3B8 !important;
    background-color: #FFF !important;
}

.pecb-competency-widget .pecb-skills .product-info__price .now {
    font-family: var(--font-display) !important;
    font-size: var(--fs-2xl) !important;
    font-weight: 500 !important;
    color: #fff !important;
}

.pecb-competency-widget .product-actions .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: 48px !important;
  padding: 0px 24px !important;
  font-size: 15px !important;
  border-radius: 10px !important;
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  border: 1px solid rgb(220, 227, 235) !important;
  background: rgb(255, 255, 255) !important;
  color: rgb(15, 23, 42) !important;
  box-shadow: none !important;
  transform: none !important;
  cursor: pointer !important;
  width: calc(50% - 0.38rem) !important;
}

.pecb-competency-widget .product-actions .btn:hover {
    border-radius: 10px !important; 
    border: 1px solid rgba(201, 210, 220) !important;
    background: rgba(243, 245, 247) !important;
    width: calc(50%-0.75rem);
    width: calc(50% - 0.38rem);
    color: #000 !important;
}

.pecb-competency-widget .product-actions .btn--outline {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: 48px !important;
  padding: 0px 24px !important;
  font-size: 15px !important;
  border-radius: 10px !important;
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  border: 1px solid rgb(220, 227, 235) !important;
  background: rgb(255, 255, 255) !important;
  color: rgb(15, 23, 42) !important;
  box-shadow: none !important;
  transform: none !important;
  cursor: pointer !important;
  width: calc(50% - 0.38rem) !important;
}

.pecb-competency-widget .product-actions .btn--outline:hover {
  border-radius: 10px !important;
  border: 1px solid rgba(201, 210, 220) !important;
  background: #a11e29 !important;
  width: calc(50%-0.75rem) !important;
  width: calc(50% - 0.38rem) !important;
  color: #fff !important;
}

.pecb-competency-widget .product-info__price .now{
  color: rgb(15, 23, 42) !important;
  font-size: 40px !important;
  font-style: normal !important;
  font-weight: 500 !important;
  line-height: 1 !important; 
}

/* ----------  Responsive  ---------- */
@media (max-width: 1024px) {
  .pecb-skills .checkout-layout, .pecb-skills .cart-layout{ grid-template-columns: 1fr; }
  .pecb-skills .summary-card, .pecb-skills .order-summary-card{ position: static; }
  .pecb-skills .order-summary-card{ order: -1; }
}
@media (max-width: 860px) {
  .pecb-skills .product-hero__inner{ grid-template-columns: 1fr; }
  .pecb-skills .next-grid{ grid-template-columns: 1fr; }
  .pecb-skills .order-card__grid{ grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .pecb-skills .cart-table-head{ display: none; }
  .pecb-skills .cart-row{ grid-template-columns: 1fr; gap: var(--space-3); }
  .pecb-skills .cart-row > div{ display: flex; justify-content: space-between; align-items: center; }
  .pecb-skills .cart-row .cart-product{ justify-content: flex-start; }
  .pecb-skills .cart-price::before{ content: "Price"; color: var(--color-text-muted); font-weight: 500; }
  .pecb-skills .cart-total-cell::before{ content: "Total"; color: var(--color-text-muted); font-weight: 500; }
}