/* Theme Name: WP Portfolio Child
Template: wp-portfolio
Version: 1.1.7
Description: Product grid cleanup – fixes first-row 5 items by removing incorrect clear rule and using exact fifths.
*/

/* Font */
@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap");

/* ===== GRID: 5 per row on desktop (fixed) ===== */
.post-main .post {
  float: left;
  width: calc(100% / 5) !important;   /* precise fifths */
  box-sizing: border-box;
  margin: 0 !important;               
  padding: 0 !important;              
}
/* ⚠️ removed the clear-left nth-of-type rule that caused misalignment */

@media (max-width:1023px){
  .post-main .post { width: 50% !important; }
}
@media (max-width:767px){
  .post-main .post { width: 100% !important; }
}

/* ==== IMAGE BOX ==== */
.post-main .post .entry-wrap {
  display: block;
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  overflow: hidden;
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-color: #fff !important;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  transition: box-shadow 0.2s ease;
}
.post-main .post .entry-wrap:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.18); }

@supports not (aspect-ratio: 1 / 1) {
  .post-main .post .entry-wrap::before { content:""; display:block; padding-top:100%; }
}

/* remove old <img> */
.post-main .post .entry-wrap img,
.post-main .post .post-thumbnail img,
.post-main .post .entry-thumb img { display: none !important; }

/* ==== OPTIONAL PRODUCT GRID COMPONENT ==== */
.product-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin:20px 0; }
.product-grid .product-card { background:#fff; border-radius:10px; overflow:hidden; text-align:center; padding:10px; box-sizing:border-box; }

/* ==== PRICE BADGE (archive) ==== */
.post-main .post .deal-badge,
.post-main .post .deal-badge.outside {
  position: static !important;
  display: block !important;
  margin-top: 10px !important;
  text-align: center !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  pointer-events: none !important;
}
.post-main .post .deal-badge .line { display:none !important; }
.post-main .post .deal-badge .price,
.post-main .post .deal-badge.outside .price {
  background: transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
  margin:0 !important;
  font-family:"Bebas Neue", system-ui, sans-serif !important;
  font-size:1.15rem; font-weight:700; color:#111 !important; line-height:1.2 !important;
  text-transform:uppercase; letter-spacing:.25px;
}
.post-main .post .deal-badge .price s { color:#9aa0a6 !important; text-decoration:line-through; margin-right:6px; font-weight:400; }
.post-main .post .deal-badge .price .new { color:#111 !important; font-weight:700; }
.post-main .post .deal-badge .price .off { color:#d00000 !important; margin-left:6px; font-weight:700; }

/* ==== SINGLE PRODUCT PRICE ==== */
.sdd-pricebox { background:transparent !important; border:0 !important; padding:0 !important; margin-bottom:10px !important; }
.sdd-prices .sdd-old { color:#9aa0a6 !important; text-decoration:line-through; font-family:"Bebas Neue", system-ui, sans-serif !important; }
.sdd-prices .sdd-new { color:#111 !important; font-family:"Bebas Neue", system-ui, sans-serif !important; font-weight:700; }
.sdd-off { color:#d00000 !important; font-family:"Bebas Neue", system-ui, sans-serif !important; border-radius:0 !important; }

/* ==== BASE ==== */
html, body, #page, .site, .site-content, .content-area, .wrapper, .container { background:#ffffff !important; color:#111 !important; }

/* product hero */
.sdd-product-hero { display:grid; grid-template-columns:45% 55%; gap:32px; align-items:start; margin:30px 0; padding:24px; border:1px solid #eee; border-radius:12px; background:#fff; }
@media (max-width:900px){ .sdd-product-hero{ grid-template-columns:1fr; } }

/* CTA */
.sdd-buybtn { display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:14px 24px; border-radius:999px; font-weight:800; font-size:1.05rem; text-transform:uppercase; letter-spacing:.4px; background:linear-gradient(135deg,#ff9900,#ff2d55); color:#fff !important; text-decoration:none; box-shadow:0 12px 24px rgba(255,45,85,.25); transition:all .2s ease; }
.sdd-buybtn:hover { transform:translateY(-1px); box-shadow:0 14px 28px rgba(255,45,85,.35); }
.sdd-buybtn:active { transform:translateY(0); }
.sdd-buybtn::after { content:" →"; font-weight:900; }

/* ==== BEST DEALS OF THE DAY ==== */
.sdd-best-row { margin:20px 0 30px; padding:10px 0; }
.sdd-best-head { display:flex; align-items:center; gap:10px; margin:0 0 12px; font-family:"Bebas Neue", system-ui, sans-serif; }
.sdd-best-head .sdd-badge { background:#ffbf3b; color:#111; font-weight:700; border-radius:0; padding:6px 14px; white-space:nowrap; font-size:1rem; }
.sdd-best-head small { opacity:.7; font-size:.9rem; }
.sdd-best-grid { display:grid; grid-template-columns:repeat(4, minmax(200px,1fr)); gap:16px; }

.sdd-best-card { position:relative; display:flex; align-items:center; gap:12px; background:#fff; border:0; border-radius:12px; padding:10px 12px; padding-right:56px; text-decoration:none; color:inherit; box-shadow:0 2px 6px rgba(0,0,0,.08); transition:all .2s ease; }
.sdd-best-card:hover { box-shadow:0 4px 12px rgba(0,0,0,.15); transform:translateY(-2px); }

.sdd-best-thumb { width:72px; height:72px; border-radius:10px; background:#eee center/cover no-repeat; flex-shrink:0; }
.sdd-best-text { display:flex; flex-direction:column; line-height:1.25; font-size:.95rem; }
.sdd-best-text small { position:absolute; top:8px; right:8px; margin:0 !important; background:#ffbf3b; color:#111; font-weight:800; padding:4px 10px; border-radius:0; font-size:.85rem; line-height:1; box-shadow:0 2px 6px rgba(0,0,0,.15); white-space:nowrap; }

@media (max-width:900px){
  .sdd-best-grid { grid-template-columns: repeat(2, 1fr); }
  .sdd-best-thumb { width:60px; height:60px; }
}

/* Hide only top-level UL inside the post body (keeps boxes/sidebars) */
.single-post .entry-content > ul { display: none !important; }
/* Hide the last two paragraphs (extra CTA + Buy on Amazon link) */
.single-post .entry-content > p:nth-last-of-type(-n+2) { display: none !important; }
/* 1) Slightly increase space between listings (keeps 5/row) */
.post-main { margin-left: -8px; margin-right: -8px; }
.post-main .post { padding: 8px !important; }  /* gutter around each card */

/* 2) Light yellow highlight behind the red discount text */
.post-main .post .deal-badge .price .off {
  background: #fff7b0;          
  padding: 2px 6px;
  border-radius: 4px;
  display: inline-block;
}
/* --- HARD CAP: never more than 5 items per row --- */
.post-main {
  display: flex !important;
  flex-wrap: wrap !important;
}

.post-main .post {
  float: none !important;
  flex: 0 0 calc(100% / 5) !important;   /* 5 equal columns */
  max-width: calc(100% / 5) !important;
}
@media (max-width:1023px){
  .post-main .post { flex-basis:50% !important; max-width:50% !important; }
}
@media (max-width:767px){
  .post-main .post { flex-basis:100% !important; max-width:100% !important; }
}
/* --- Fix 5-per-row wrapping at 100% zoom (rounding epsilon) --- */
@media (min-width:1024px){
  .post-main .post{
    width: calc((100% / 5) - 0.6px) !important; /* tiny epsilon so 5 always fit */
  }
}
/* Ensure parent post container is positioned */
.post {
    position: relative;
}

/* Expired badge overlay */
.expired-overlay {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(200, 0, 0, 0.9);
    color: #fff;
    font-weight: bold;
    padding: 5px 10px;
    border-radius: 3px;
    font-size: 14px;
    z-index: 10;
    pointer-events: none; /* Don't block clicks */
}
/* === Fix BEST DEALS OF THE DAY prices === */
.sdd-best-card .price {
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
}

/* Old price crossed out (before) */
.sdd-best-card .price s {
  order: 1;
  font-size: 0.9rem !important;
  color: #999 !important;
  text-decoration: line-through !important;
}

/* Discounted price bold (after) */
.sdd-best-card .price .new {
  order: 2;
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  color: #111 !important;
}
/* --- Best Deals price styles --- */
.sdd-best-text small {
  display: block;
  font-size: 0.9em;
  margin-top: 4px;
}

.sdd-best-price {
  color: #d32f2f;   /* red for discounted price */
  font-weight: bold;
  margin-right: 6px;
}

.sdd-best-original {
  color: #777;      /* gray for original price */
  margin-right: 6px;
}

.sdd-best-text small del {
  text-decoration: line-through;
}

.sdd-best-discount {
  background: #388e3c;   /* green badge */
  color: #fff;
  font-size: 0.75em;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 6px;
}
.sdd-best-price {
  color: #d32f2f; /* red */
  font-weight: bold;
  margin-right: 6px;
}

.sdd-best-original {
  color: #777;
  text-decoration: line-through;
  margin-right: 6px;
}

.sdd-best-discount {
  background: #388e3c;
  color: #fff;
  font-size: 0.75em;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 4px;
}
.sdd-best-price {
  color: #d32f2f; /* red for emphasis */
  font-weight: bold;
  margin-right: 4px;
}

.sdd-best-original {
  color: #888;
  text-decoration: line-through;
  margin-right: 4px;
}

.sdd-best-discount {
  color: WHITE; /* green for discount */
  font-weight: 600;
}
/* Add custom footer copyright text


/* Force show discount % text inside the deal card */
.sdd-best-discount {
    visibility: visible !important;
    opacity: 1 !important;
    color: #fff !important;          /* white text */
    font-size: 13px !important;      /* readable size */
    font-weight: bold !important;
    line-height: 1.4 !important;
    position: relative !important;
    z-index: 9999 !important;        /* force above background */
}

/* If parent was clipping it, reset overflow */
.sdd-best-text small {
    overflow: visible !important;
}
/* ===== SDD: put the banner behind content; keep nav/content on top ===== */
.sdd-header-banner,
.header-banner,
.main-hero-banner,
.header-image,
.custom-header {
  position: relative !important;
  z-index: 0 !important;
  pointer-events: none !important;   /* overlay can't block clicks/hover */
}

/* Make sure nothing from the header adds an overlay */
.sdd-header-banner::before,
.sdd-header-banner::after,
.header-image::before,
.header-image::after {
  pointer-events: none !important;
}

/* Bring nav + first content blocks above */
#site-navigation,
.main-navigation,
.site-content,
#primary,
#main,
.site-main,
.post-main,
.sdd-best-row,
.deals-heading,
.sdd-best-head {
  position: relative !important;
  z-index: 5 !important;
}

/* Break margin-collapsing so top headings can’t vanish into the previous block */
.site-content,
#primary,
#main,
.site-main,
#content {
  display: flow-root !important;   /* new block formatting context */
}

/* First child under content should never create a top gap */
.site-content > *:first-child,
#primary > *:first-child,
#main.site-main > *:first-child,
#content > *:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
/* TEMP: visualize layers */
/*.sdd-header-banner { outline: 2px solid magenta !important; }
#site-navigation { outline: 2px solid orangered !important; }
#site-navigation + * { outline: 2px dashed red !important; } */

/* Hide Best Deals everywhere by default */
.sdd-best-row { display: none !important; }

/* Show it on the homepage / blog index */
.home .sdd-best-row,
.blog .sdd-best-row { display: block !important; }

/* Show it on the All Deals category (adjust the slug if needed) */
.category-all-deals .sdd-best-row,
.tax-product_cat-all-deals .sdd-best-row { display: block !important; }

/* If your All Deals is a static page, un-comment and use its page ID */
/* .page-id-123 .sdd-best-row { display: block !important; } */