/* =========================================================
    Shih Tzu Central — Responsive Base for Posts/Pages
    Mobile-first • WordPress/Gutenberg-aware
========================================================= */

/* --------- Brand tokens --------- */
:root{
  --stc-teal:#3CBEB3;
  --stc-teal-600:#33a8a0;
  --stc-teal-100:rgba(60,190,179,.10);
  --ink:#3A2B23;
  --ink-70:rgba(58,43,35,.70);
  --bg:#FFFFFF;
  --bg-soft:#F9F9F9;
  --ring:#E0EE0;
  --shadow:0 6px 18px rgba(60,190,179,.22);
}

/* --------- Content container & global rhythm --------- */
.entry-content{
  color:var(--ink);
  font-size:17px; line-height:1.58;
  word-break:break-word; overflow-wrap:anywhere; hyphens:auto;
}
@media (min-width:720px){ .entry-content{font-size:18px} }
@media (min-width:1024px){ .entry-content{font-size:18.5px} }

.entry-content p{margin:.5rem 0 .95rem}
.entry-content ul,
.entry-content ol{margin:.35rem 0 1rem 1.25rem;padding:0}
.entry-content li{margin:.25rem 0}

/* Tighten general WP alignments */
.entry-content .alignwide{max-width:min(1150px,96vw);margin-left:auto;margin-right:auto}
.entry-content .alignfull{max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.entry-content .aligncenter{margin-left:auto;margin-right:auto}

/* =========================================================
    Headings
========================================================= */
.entry-content h1{
  font-size:clamp(28px,3.2vw,38px)!important;
  line-height:1.2!important;
  margin:1.2rem 0 .8rem!important;
  color:var(--stc-teal)!important;
  font-weight:700!important;
}
.entry-content h2{
  font-size:clamp(22px,2.4vw,28px)!important;
  line-height:1.3!important;
  margin:1.1rem 0 .6rem!important;
  color:var(--stc-teal)!important;
  font-weight:700!important;
  padding-top:1.25rem;
  border-top:2px solid rgba(60,190,179,.25);
}
.entry-content h2:first-of-type{border-top:0;padding-top:0;margin-top:.75rem}
.entry-content h3{
  font-size:clamp(18px,2vw,22px)!important;
  line-height:1.35!important;
  margin:1rem 0 .5rem!important;
  color:var(--stc-teal)!important;
  font-weight:700!important;
}

/* tiny headings if they appear inside tables */
.entry-content table h2,
.entry-content table h3{
  font-size:1rem!important;line-height:1.3!important;color:var(--ink)!important;margin:0!important
}

/* =========================================================
    Links & Emphasis
========================================================= */
.entry-content a{color:var(--stc-teal);text-decoration:none}
.entry-content a:hover{text-decoration:underline}
.entry-content p b,
.entry-content p strong{color:var(--stc-teal)}

/* =========================================================
    Buttons (Buy Now)
========================================================= */
.entry-content a.buy-now-link,
.entry-content table a.buy-now-link{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:44px;padding:0 .9rem;border-radius:9999px;
  background:var(--stc-teal);color:#fff!important;font-weight:700;text-decoration:none!important;
  box-shadow:var(--shadow);
  transition:transform .1s ease, box-shadow .2s ease, background .2s ease;
  margin-top:.6rem;margin-bottom:1.75rem
}
.entry-content a.buy-now-link:hover,
.entry-content table a.buy-now-link:hover{
  background:var(--stc-teal-600);box-shadow:0 8px 22px rgba(60,190,179,.28);transform:translateY(-1px)
}
.entry-content a.buy-now-link::after,
.entry-content table a.buy-now-link::after{content:"↗";font-size:.95em;line-height:1;opacity:.9}

/* =========================================================
    Images & Media
========================================================= */
.entry-content img{height:auto;max-width:100%}
.entry-content p>img,
.entry-content a>img{
  display:block;margin:.6rem auto 1rem;max-width:720px;width:100%;
  border-radius:10px;border:1px solid rgba(60,190,179,.15);
  box-shadow:0 8px 22px rgba(0,0,0,.06);
  transition:transform .25s ease, box-shadow .25s ease
}
@media (hover:hover) and (pointer:fine){
  .entry-content a:hover>img,.entry-content p>img:hover{
    transform:scale(1.035);
    box-shadow:0 10px 24px rgba(0,0,0,.10),0 4px 10px rgba(60,190,179,.18)
  }
}

/* Responsive iframes/embeds */
.entry-content .wp-block-embed__wrapper,
.entry-content .wp-block-embed,
.entry-content .responsive-embed{
  position:relative;width:100%;
}
.entry-content .wp-block-embed.is-provider-youtube iframe,
.entry-content .wp-block-embed iframe,
.entry-content .responsive-embed iframe{
  width:100%!important;height:auto;aspect-ratio:16/9;border:0;border-radius:10px;
  box-shadow:0 6px 16px rgba(0,0,0,.08)
}

/* =========================================================
    Customer Quotes — “What People Say”
========================================================= */
.entry-content blockquote,
.entry-content .wp-block-quote,
.entry-content .wp-block-pullquote{
  position:relative;margin:1.25rem 0;
  padding:1.1rem 1.1rem 1.1rem 3.25rem;
  border:1px solid rgba(60,190,179,.25);
  border-left:6px solid var(--stc-teal);
  border-radius:12px;background:linear-gradient(180deg,#fff,#F6FEFD);
  box-shadow:0 4px 14px rgba(58,43,35,.06);color:var(--ink);
}
.entry-content blockquote::before,
.entry-content .wp-block-quote::before,
.entry-content .wp-block-pullquote::before{
  content:"“";position:absolute;left:12px;top:4px;font-size:44px;line-height:1;color:var(--stc-teal);opacity:.25
}
.entry-content blockquote p,
.entry-content .wp-block-quote p,
.entry-content .wp-block-pullquote p{margin:.25rem 0 .5rem;font-size:1.02em}
.entry-content blockquote cite,
.entry-content .wp-block-quote cite,
.entry-content .wp-block-pullquote cite{
  display:block;margin-top:.35rem;font-style:normal;font-weight:600;color:var(--stc-teal);font-size:.95em
}
.entry-content .wp-block-pullquote blockquote{margin:0;padding:0;border:0;background:transparent;box-shadow:none}
@media (max-width:720px){
  .entry-content blockquote,
  .entry-content .wp-block-quote,
  .entry-content .wp-block-pullquote{
    padding:.9rem .9rem .9rem 2.6rem;border-radius:10px;
  }
  .entry-content blockquote::before,
  .entry-content .wp-block-quote::before,
  .entry-content .wp-block-pullquote::before{left:10px;top:0;font-size:38px}
}

/* =========================================================
    Tables — Base + Responsive + Sticky headers
========================================================= */
.entry-content .wp-block-table{
  position:relative;background:#fff;border:1px solid var(--stc-teal);border-radius:10px;
  padding:10px;box-shadow:0 2px 10px rgba(58,43,35,.06);overflow-x:auto;margin:1rem 0
}
/* subtle overflow hint */
.entry-content .wp-block-table::after{
  content:"";position:absolute;right:6px;top:0;bottom:0;width:22px;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.9));opacity:0;transition:opacity .2s ease
}
.entry-content .wp-block-table:hover::after{opacity:1}

.entry-content table,
.entry-content .wp-block-table table{
  width:100%;border-collapse:collapse;color:var(--ink);font-size:15px;line-height:1.55;table-layout:auto
}
/* sticky header for long tables */
.entry-content table thead th,
.entry-content .wp-block-table table thead th{position:sticky;top:0;z-index:2}

/* ===== Unified teal header across all tables ===== */
.entry-content table thead th,
.entry-content .wp-block-table table thead th,
.entry-content table tbody tr:first-child>th,
.entry-content .wp-block-table table tbody tr:first-child>th{
  background:var(--stc-teal)!important;
  color:#fff!important;
  text-align:left;
  font-weight:700;
  padding:12px 14px;
  border-bottom:2px solid var(--stc-teal);
  vertical-align:middle;
}
/* ensure header links are white */
.entry-content table thead th a,
.entry-content .wp-block-table table thead th a{color:#fff!important;text-decoration:none}
.entry-content table thead th a:hover,
.entry-content .wp-block-table table thead th a:hover{text-decoration:underline}

.entry-content table td,
.entry-content table th,
.entry-content .wp-block-table table td,
.entry-content .wp-block-table table th{
  padding:12px 14px;border-bottom:1px solid var(--ring);vertical-align:middle
}
.entry-content table tbody tr:nth-child(even) td,
.entry-content .wp-block-table table tbody tr:nth-child(even) td{background:var(--bg-soft)}
.entry-content table tbody tr:hover td,
.entry-content .wp-block-table table tbody tr:hover td{background:#EAF9F7}
.entry-content table a,
.entry-content .wp-block-table table a{color:var(--stc-teal);text-decoration:none;font-weight:600}
.entry-content table a:hover,
.entry-content .wp-block-table table a:hover{text-decoration:underline}
.entry-content table img,
.entry-content .wp-block-table table img{max-width:100%;height:auto;border-radius:8px;display:inline-block}
.entry-content table caption,
.entry-content .wp-block-table table caption{caption-side:top;text-align:left;font-weight:700;color:var(--stc-teal);padding:0 0 8px 0}

/* --------- Top Picks Table (4 cols) --------- */
.entry-content .top-picks table, .entry-content table.top-picks {table-layout:fixed}
.entry-content .top-picks table thead th, .entry-content table.top-picks thead th {background:var(--stc-teal)!important;color:#fff!important}
.entry-content .top-picks table th:nth-child(1), .entry-content table.top-picks th:nth-child(1),
.entry-content .top-picks table td:nth-child(1), .entry-content table.top-picks td:nth-child(1) {width:20%}
.entry-content .top-picks table th:nth-child(2), .entry-content table.top-picks th:nth-child(2),
.entry-content .top-picks table td:nth-child(2), .entry-content table.top-picks td:nth-child(2) {width:50%}
.entry-content .top-picks table th:nth-child(3), .entry-content table.top-picks th:nth-child(3),
.entry-content .top-picks table td:nth-child(3), .entry-content table.top-picks td:nth-child(3),
.entry-content .top-picks table th:nth-child(4), .entry-content table.top-picks th:nth-child(4),
.entry-content .top-picks table td:nth-child(4), .entry-content table.top-picks td:nth-child(4) {width:15%;text-align:center;white-space:nowrap}
.entry-content .top-picks table td:nth-child(3), .entry-content table.top-picks td:nth-child(3),
.entry-content .top-picks table td:nth-child(4), .entry-content table.top-picks td:nth-child(4) {font-size:12px;line-height:1.2}

/* =========================================================
    WRAPPING UP / COMPARISON TABLE — CLEAN & ROBUST
========================================================= */

.entry-content .comparison-table table, .entry-content table.comparison-table {
  width:100%!important;
  table-layout:auto!important;
  font-size:14px;
  border-collapse:collapse;
  border-spacing:0;
}

/* Reset widths that plugins/editors might inject */
.entry-content .comparison-table table th, .entry-content table.comparison-table th,
.entry-content .comparison-table table td, .entry-content table.comparison-table td {
  width:auto!important;
  vertical-align:middle;
  padding:12px 14px;
}

/* Hide extra columns 5–7 if present */
.entry-content .comparison-table table th:nth-child(5), .entry-content table.comparison-table th:nth-child(5),
.entry-content .comparison-table table td:nth-child(5), .entry-content table.comparison-table td:nth-child(5),
.entry-content .comparison-table table th:nth-child(6), .entry-content table.comparison-table th:nth-child(6),
.entry-content .comparison-table table td:nth-child(6), .entry-content table.comparison-table td:nth-child(6),
.entry-content .comparison-table table th:nth-child(7), .entry-content table.comparison-table th:nth-child(7),
.entry-content .comparison-table table td:nth-child(7), .entry-content table.comparison-table td:nth-child(7) {
  display:none!important;
}

/* Proportions: Product 46% | Image 20% | Rating 17% | Price 17% */
.entry-content .comparison-table table th:nth-child(1), .entry-content table.comparison-table th:nth-child(1),
.entry-content .comparison-table table td:nth-child(1), .entry-content table.comparison-table td:nth-child(1) {width:46%!important}
.entry-content .comparison-table table th:nth-child(2), .entry-content table.comparison-table th:nth-child(2),
.entry-content .comparison-table table td:nth-child(2), .entry-content table.comparison-table td:nth-child(2) {width:20%!important;text-align:center}
.entry-content .comparison-table table th:nth-child(3), .entry-content table.comparison-table th:nth-child(3),
.entry-content .comparison-table table td:nth-child(3), .entry-content table.comparison-table td:nth-child(3),
.entry-content .comparison-table table th:nth-child(4), .entry-content table.comparison-table th:nth-child(4),
.entry-content .comparison-table table td:nth-child(4), .entry-content table.comparison-table td:nth-child(4) {
  width:17%!important;text-align:center;white-space:nowrap;font-size:12.5px;line-height:1.25
}

/* Clamp long product names */
.entry-content .comparison-table table td:nth-child(1) a, .entry-content table.comparison-table td:nth-child(1) a {
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis
}

/* Image handling */
.entry-content .comparison-table table td:nth-child(2) img, .entry-content table.comparison-table td:nth-child(2) img {
  display:block;margin:0 auto;border-radius:10px;
  max-width:110px;max-height:110px;width:auto;height:auto;object-fit:contain;
  box-shadow:0 3px 10px rgba(0,0,0,.06);
  transition:transform .25s ease, box-shadow .25s ease;
}
@media (hover:hover) and (pointer:fine){
  .entry-content .comparison-table table td:nth-child(2) img:hover, .entry-content table.comparison-table td:nth-child(2) img:hover {
    transform:scale(1.035);box-shadow:0 10px 24px rgba(0,0,0,.10),0 4px 10px rgba(60,190,179,.18)
  }
}

/* Zebra & hover */
.entry-content .comparison-table table tbody tr:nth-child(even) td, .entry-content table.comparison-table tbody tr:nth-child(even) td {background:var(--bg-soft)}
.entry-content .comparison-table table tbody tr:hover td, .entry-content table.comparison-table tbody tr:hover td {background:#EAF9F7}

/* =========================================================
    Gutenberg Columns & Galleries
========================================================= */
.entry-content .wp-block-columns{gap:clamp(16px,2.5vw,28px)}
@media (max-width:900px){
  .entry-content .wp-block-columns{flex-wrap:wrap}
  .entry-content .wp-block-column{flex-basis:100%!important}
}

/* Gallery: tidy grid & spacing */
.entry-content .wp-block-gallery{gap:12px}
.entry-content .wp-block-gallery .wp-block-image img{
  width:100%;height:auto;border-radius:10px;box-shadow:0 6px 14px rgba(0,0,0,.05)
}

/* =========================================================
    Mobile-specific niceties (typography & spacing)
========================================================= */
@media (max-width:720px){
  .entry-content{line-height:1.62}
  .entry-content h1{font-size:clamp(26px,7vw,34px)!important}
  .entry-content h2{font-size:clamp(20px,5.5vw,26px)!important}
  .entry-content h3{font-size:clamp(17px,4.8vw,20px)!important}
  .entry-content p{margin:.45rem 0 .9rem}
  
  /* ===== Mobile Tables to Cards ===== */

  /* ====== Universal Tables to Cards (Mobile) ====== */
  /* Applies to any table that isn't a .top-picks or .comparison-table */
  
  /* 1. Reset the .wp-block-table wrapper styling if it exists */
  .entry-content .wp-block-table:not(.comparison-table):not(.top-picks) {
    border:0; padding:0; background:transparent; box-shadow:none; overflow-x:visible;
  }
  
  /* 2. Hide the table header, whether it's in a header section or the first table body row */
  .entry-content table:not(.comparison-table):not(.top-picks) thead,
  .entry-content table:not(.comparison-table):not(.top-picks) tbody tr:first-child {
    border:none; clip:rect(0 0 0 0); height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute; width:1px;
  }

  /* 3. Style subsequent rows as cards */
  .entry-content table:not(.comparison-table):not(.top-picks) tr {
    display:block; margin-bottom:1rem; border:1px solid var(--ring); border-radius:12px;
    padding:.75rem 1rem; background:#fff; box-shadow:0 2px 10px rgba(58,43,35,.06);
  }

  /* 4. Style cells as label/value pairs */
  .entry-content table:not(.comparison-table):not(.top-picks) td {
    display:grid; grid-template-columns:7.5em 1fr; gap:.75rem; align-items:start;
    font-size:14px; padding:.75rem 0; border-bottom:1px solid var(--ring);
    width:100%!important; text-align:left; word-break:break-word;
  }
  .entry-content table:not(.comparison-table):not(.top-picks) td:last-child {
    border-bottom:0;
  }

  /* 5. Create labels for the cells */
  .entry-content table:not(.comparison-table):not(.top-picks) td::before {
    font-weight:700; color:var(--ink-70);
  }
  .entry-content table:not(.comparison-table):not(.top-picks) td:nth-of-type(1)::before{ content:""; }
  .entry-content table:not(.comparison-table):not(.top-picks) td:nth-of-type(2)::before{ content:"Details"; }
  .entry-content table:not(.comparison-table):not(.top-picks) td:nth-of-type(3)::before{ content:"Rating"; }
  .entry-content table:not(.comparison-table):not(.top-picks) td:nth-of-type(4)::before{ content:"Check Price"; }

  /* 6. Special handling for the first column (assumed image) and its image */
  .entry-content table:not(.comparison-table):not(.top-picks) td:nth-of-type(1) {
    grid-template-columns:1fr; text-align:center;
  }
  .entry-content table:not(.comparison-table):not(.top-picks) img {
    display:block; margin:.25rem auto; max-width:140px; max-height:140px; object-fit:contain; border-radius:10px;
  }
  
  /* ====== Specific Card Styles for .top-picks and .comparison-table ====== */

  /* Hide table headers on mobile (comparison & top-picks) */
  .entry-content .comparison-table table thead,
  .entry-content table.comparison-table thead,
  .entry-content .top-picks table thead,
  .entry-content table.top-picks thead,
  .entry-content .comparison-table table tbody tr:first-child,
  .entry-content table.comparison-table tbody tr:first-child,
  .entry-content .top-picks table tbody tr:first-child,
  .entry-content table.top-picks tbody tr:first-child {
    border:none;
    clip:rect(0 0 0 0);
    height:1px;
    margin:-1px;
    overflow:hidden;
    padding:0;
    position:absolute;
    width:1px;
  }

  /* Remove the container styling for card-based tables */
  .entry-content .wp-block-table.comparison-table,
  .entry-content .wp-block-table.top-picks {
    border:0;
    padding:0;
    background:transparent;
    box-shadow:none;
    overflow-x:visible;
  }

  /* Style table rows as cards (base for comparison/top-picks) */
  .entry-content .comparison-table table tr,
  .entry-content table.comparison-table tr,
  .entry-content .top-picks table tr,
  .entry-content table.top-picks tr {
    display:block;
    margin-bottom:1rem;
    border:1px solid var(--ring);
    border-radius:12px;
    padding:.75rem 1rem;
    background:#fff;
    box-shadow:0 2px 10px rgba(58,43,35,.06);
  }

  /* ===== Balanced label/value layout via CSS Grid (default) ===== */
  .entry-content .comparison-table table td,
  .entry-content table.comparison-table td,
  .entry-content .top-picks table td,
  .entry-content table.top-picks td {
    display:grid;
    grid-template-columns:7.5em 1fr;
    gap:.75rem;
    align-items:start;
    font-size:14px;
    padding:.75rem 0;
    border-bottom:1px solid var(--ring);
    width:100%!important;
    text-align:left;
    word-break:break-word;
  }

  /* Labels */
  .entry-content .comparison-table table td::before,
  .entry-content table.comparison-table td::before,
  .entry-content .top-picks table td::before,
  .entry-content table.top-picks td::before {
    font-weight:700;
    color:var(--ink-70);
  }

  /* Remove border from last cell in card */
  .entry-content .comparison-table table td:last-child,
  .entry-content table.comparison-table td:last-child,
  .entry-content .top-picks table td:last-child,
  .entry-content table.top-picks td:last-child { border-bottom:0 }

  /* --- Specific Labels & Layouts --- */
  /* Comparison Table labels */
  .entry-content .comparison-table table td:nth-of-type(1)::before,
  .entry-content table.comparison-table td:nth-of-type(1)::before { content:"Product"; }
  .entry-content .comparison-table table td:nth-of-type(2)::before,
  .entry-content table.comparison-table td:nth-of-type(2)::before { content:""; }
  .entry-content .comparison-table table td:nth-of-type(3)::before,
  .entry-content table.comparison-table td:nth-of-type(3)::before { content:"Rating"; }
  .entry-content .comparison-table table td:nth-of-type(4)::before,
  .entry-content table.comparison-table td:nth-of-type(4)::before { content:"Price"; }

  /* Top Picks labels */
  .entry-content .top-picks table td:nth-of-type(1)::before,
  .entry-content table.top-picks td:nth-of-type(1)::before { content:""; }
  .entry-content .top-picks table td:nth-of-type(2)::before,
  .entry-content table.top-picks td:nth-of-type(2)::before { content:"Details"; }
  .entry-content .top-picks table td:nth-of-type(3)::before,
  .entry-content table.top-picks td:nth-of-type(3)::before { content:"Rating"; }
  .entry-content .top-picks table td:nth-of-type(4)::before,
  .entry-content table.top-picks td:nth-of-type(4)::before { content:"Check Price"; }

  /* Promote the first cell as a card header (comparison) */
  .entry-content .comparison-table table td:nth-of-type(1),
  .entry-content table.comparison-table td:nth-of-type(1){
    grid-template-columns:1fr;
    padding-top:.25rem;
  }
  .entry-content .comparison-table table td:nth-of-type(1)::before,
  .entry-content table.comparison-table td:nth-of-type(1)::before{
    content:"";
    display:none;
  }
  .entry-content .comparison-table table td:nth-of-type(1) a,
  .entry-content table.comparison-table td:nth-of-type(1) a {
    -webkit-line-clamp:unset;
    font-weight:700;
    line-height:1.3;
  }

  /* Image cells — center and keep compact (base) */
  .entry-content .comparison-table table td:nth-of-type(2),
  .entry-content table.comparison-table td:nth-of-type(2),
  .entry-content .top-picks table td:nth-of-type(1){
    grid-template-columns:1fr;
    text-align:center;
  }
  .entry-content .comparison-table table td:nth-of-type(2) img,
  .entry-content table.comparison-table td:nth-of-type(2) img,
  .entry-content .top-picks table td:nth-of-type(1) img{
    margin:0 auto;
    max-width:140px;max-height:140px;
  }

  /* Make CTAs comfortable on small screens (inside tables only) */
  .entry-content .comparison-table a.buy-now-link,
  .entry-content table.comparison-table a.buy-now-link,
  .entry-content .top-picks a.buy-now-link,
  .entry-content table.top-picks a.buy-now-link{
    width:100%;
    margin-top:.5rem;
    justify-content:center;
  }

  /* ====== STRONG CENTERING for Wrapping Up (comparison) ====== */
  .entry-content .comparison-table table tr,
  .entry-content table.comparison-table tr { text-align:center!important; }
  .entry-content .comparison-table table td,
  .entry-content table.comparison-table td{
    grid-template-columns:1fr!important;
    justify-items:center!important;
    text-align:center!important;
  }
  .entry-content .comparison-table table td::before,
  .entry-content table.comparison-table td::before{
    display:block!important;
    margin-bottom:.25rem!important;
    text-align:center!important;
  }
  .entry-content .comparison-table table td:nth-of-type(1) a,
  .entry-content table.comparison-table td:nth-of-type(1) a{
    justify-self:center!important;
  }
}

/* =========================================================
    Accessibility & Motion
========================================================= */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}