/* ==========================================================================
   promo.css
   Promotion-section additions for pimrypie.com (web_id 16 / theme 17).

   This file EXTENDS /assets/css/pimrypie-landing.css -- it does not replace
   it. Both are linked from the DB content, landing CSS first:

     <link rel="stylesheet" href="/assets/css/pimrypie-landing.css">
     <link rel="stylesheet" href="/images/public/promotion/promo.css">

   Everything stays scoped under .prp-lp / .prp-art, so it cannot leak into
   the rest of the theme. The !important declarations exist for the same
   reason they do in the landing file: theme 17 injects
     p { font-family:arial !important; line-height:1.2em !important }
     .article-content-section img { width:100% !important; max-width:960px !important }
   which we have to beat.
   ========================================================================== */

.prp-lp,
.prp-art {
  --prp-shopee: #ee4d2d;
  --prp-shopee-dk: #d03c1e;
  --prp-lazada: #0f146d;
  --prp-lazada-dk: #0a0e4d;
  --prp-gold: #f5a623;
}

/* ---------- affiliate shop buttons ---------------------------------------
   The two live affiliate endpoints on this site are /shopee/ and /lazada/,
   which .htaccess 301s to the tracked links. Keeping the pages pointed at
   the endpoints (not the raw tracked URLs) means the affiliate codes are
   changed in one place. */

.prp-shop {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin: 0 0 26px 0;
}

.prp-shop--solo {
  grid-template-columns: 1fr;
  max-width: 420px;
}

.prp-shop__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 62px;
  padding: 14px 22px;
  border-radius: var(--prp-radius);
  font-size: 17px;
  font-weight: 500;
  color: #fff !important;
  text-align: center;
  line-height: 1.35;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.prp-shop__btn:hover {
  text-decoration: none !important;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
}

.prp-shop__btn--shopee { background: var(--prp-shopee); }
.prp-shop__btn--shopee:hover { background: var(--prp-shopee-dk); }
.prp-shop__btn--lazada { background: var(--prp-lazada); }
.prp-shop__btn--lazada:hover { background: var(--prp-lazada-dk); }

/* The inline logo mark.
   theme 17 ships `.article-content-section img { width:100% !important;
   height:auto !important }`, and article bodies render inside that wrapper.
   `.article-content-section img` scores (0,1,1), so a bare `.prp-shop__btn img`
   ties it and would be decided by stylesheet order alone. Qualifying with the
   scope class scores (0,2,1) and wins outright, wherever this file is loaded. */
.prp-lp .prp-shop__btn img,
.prp-art .prp-shop__btn img,
.prp-shop__btn img {
  width: 26px !important;
  max-width: 26px !important;
  height: 26px !important;
  flex: 0 0 26px;
  display: inline-block;
  margin: 0 !important;
  border-radius: 0;
}

/* Same hazard for the landing-page card icons: `.prp-card__ico` alone is
   (0,1,0) and would lose to the theme rule if this markup were ever placed
   inside .article-content-section. */
.prp-lp .prp-card__ico,
.prp-art .prp-card__ico {
  width: 46px !important;
  max-width: 46px !important;
  height: 46px !important;
  margin: 0 0 14px 0 !important;
}

.prp-lp .prp-shop__note,
.prp-art .prp-shop__note {
  font-size: 13px !important;
  color: var(--prp-muted) !important;
  margin: -14px 0 26px 0 !important;
  line-height: 1.7 !important;
}

.prp-lp .prp-sec--ink .prp-shop__note,
.prp-art .prp-sec--ink .prp-shop__note {
  color: #a9a9a9 !important;
}

/* ---------- promo date pill ---------------------------------------------- */

/* The pill is a <p>. The landing sheet sets
   `.prp-art p { color: var(--prp-body) !important; font-size: 17px !important }`
   which scores (0,1,1) -- a bare `.prp-pill` is only (0,1,0) and LOSES even
   with !important, leaving #333 text on a #0e0d0d pill. Scoping to
   `.prp-art .prp-pill` scores (0,2,0) and wins. */
.prp-lp .prp-pill,
.prp-art .prp-pill,
.prp-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  background: var(--prp-ink);
  color: #ffffff !important;
  border-radius: 999px;
  padding: 8px 18px 7px;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  margin: 0 0 18px 0 !important;
}

.prp-pill b {
  font-size: 16px;
  font-weight: 600;
  color: var(--prp-gold);
}

/* ---------- deal grid ----------------------------------------------------- */

.prp-deal {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 0 0 26px 0;
}

.prp-deal--2 { grid-template-columns: repeat(2, 1fr); }

.prp-deal__item {
  border: 1px solid var(--prp-line);
  border-top: 4px solid var(--prp-red);
  border-radius: var(--prp-radius);
  background: #fff;
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
}

.prp-deal__item h3 {
  font-size: 18px;
  margin-bottom: 8px;
}

.prp-lp .prp-deal__item p,
.prp-art .prp-deal__item p {
  font-size: 15.5px !important;
  color: #565656 !important;
  margin-bottom: 14px !important;
}

.prp-deal__item p:last-child {
  margin-bottom: 0 !important;
}

.prp-deal__price {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--prp-red);
  margin-top: auto;
  padding-top: 6px;
}

/* ---------- numbered how-to steps ---------------------------------------- */

.prp-steps {
  list-style: none;
  counter-reset: prp-step;
  padding: 0;
  margin: 0 0 26px 0;
}

.prp-steps li {
  counter-increment: prp-step;
  position: relative;
  padding: 0 0 18px 52px;
  font-size: 16.5px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--prp-body);
}

.prp-steps li::before {
  content: counter(prp-step);
  position: absolute;
  left: 0;
  top: 2px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--prp-red);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  line-height: 32px;
  text-align: center;
}

.prp-steps b {
  font-weight: 500;
  color: var(--prp-ink);
}

/* ---------- comparison table shading ------------------------------------- */

.prp-table td.prp-yes { color: #1c7c2f; font-weight: 500; }
.prp-table td.prp-no  { color: #999; }

/* ---------- disclosure line ----------------------------------------------
   Thai affiliate-disclosure notice. Required by Google's affiliate guidance
   and by the platforms' own terms; kept visually quiet but always present. */

.prp-disclose {
  border: 1px dashed #c9c9c9;
  background: #fafafa;
  padding: 14px 18px;
  border-radius: var(--prp-radius);
  margin: 0 0 26px 0;
}

.prp-lp .prp-disclose p,
.prp-art .prp-disclose p {
  font-size: 13px !important;
  color: #666 !important;
  line-height: 1.75 !important;
  margin: 0 !important;
}

/* ---------- responsive ---------------------------------------------------- */

@media (max-width: 991px) {
  .prp-deal { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .prp-shop { grid-template-columns: 1fr; }
  .prp-deal, .prp-deal--2 { grid-template-columns: 1fr; }
  .prp-shop__btn { font-size: 16px; }
  .prp-steps li { padding-left: 46px; font-size: 16px; }
}