/*
Theme Name: Varnilo
Theme URI: https://varnilo.com
Author: Varnilo
Author URI: https://varnilo.com
Description: Varnilo — একটি এফিলিয়েট রিভিউ ও প্রডাক্ট শোকেস ওয়ার্ডপ্রেস থিম। প্রডাক্ট গ্রিড, Buy Now / See more বাটন, Blog ও Review সেকশন সহ।
Version: 1.1
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: varnilo
*/

/* ==========================================================================
   Tokens
   ========================================================================== */
:root{
  --card-bg: #FBEACB;
  --card-border: #F0DBAF;
  --btn-buy: #EE1B3F;
  --btn-buy-hover: #C7132F;
  --btn-more: #E9CE9E;
  --btn-more-hover: #DEBE84;
  --ink: #2C2C2C;
  --ink-soft: #5A5A5A;
  --header-border: #8C8C8C;
  --footer-bg: #57585C;
  --footer-ink: #F2F2F2;
  --page-bg: #FFFFFF;
  --surface: #FFFFFF;
  --surface-soft: #FAF8F4;
  --border-soft: #ECECEC;
  --badge-dark: rgba(20,20,20,.72);
  --radius-card: 10px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 10px 24px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.05);
  --shadow-lift: 0 18px 34px rgba(0,0,0,.14), 0 4px 10px rgba(0,0,0,.06);
  --ease: cubic-bezier(.2,.7,.3,1);
  --font-display: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --max-width: 1200px;
  --sidebar-width: 320px;
}

/* ==========================================================================
   Base / global mobile-safety net
   ========================================================================== */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html, body{ max-width:100%; overflow-x:hidden; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--page-bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* কোনো ছবি/ভিডিও/আইফ্রেম যেনো কখনোই ভিউপোর্টের বাইরে না যায় */
img, svg, video, iframe, embed, object{ max-width:100%; height:auto; }
img{ display:block; }
figure{ margin:0; max-width:100%; }

a{ color:inherit; text-decoration:none; transition:color .15s var(--ease); }
h1,h2,h3,h4{ font-family:var(--font-display); margin:0 0 .5em; line-height:1.25; overflow-wrap:anywhere; }
p, li{ overflow-wrap:anywhere; }
ul{ margin:0; padding:0; list-style:none; }
:focus-visible{ outline:3px solid #2563eb; outline-offset:2px; }

/* বড় টেবিল/কোড ব্লক থাকলে পুরো পেজ যেনো হরাইজন্টালি স্ক্রল না হয় */
table{ display:block; max-width:100%; overflow-x:auto; border-collapse:collapse; }
pre, code{ max-width:100%; overflow-x:auto; white-space:pre-wrap; word-break:break-word; }

@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }

.container{ max-width:var(--max-width); margin:0 auto; padding:0 24px; width:100%; }
.screen-reader-text{ position:absolute; left:-9999px; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{ border-bottom:2px solid var(--header-border); background:var(--page-bg); }
.header-top{ text-align:center; padding:28px 20px 14px; }
.site-logo{ font-size:2.6rem; font-weight:800; letter-spacing:.02em; color:var(--ink); }
.site-logo a{ display:inline-block; }
.custom-logo{ max-height:64px; width:auto; margin:0 auto; }
.site-tagline{ color:var(--ink-soft); font-size:1.05rem; margin:6px 0 0; font-weight:600; }

.main-nav{
  display:flex; align-items:center; justify-content:space-between;
  max-width:var(--max-width); margin:0 auto; padding:14px 24px;
  border-top:2px solid var(--header-border);
  flex-wrap:wrap; gap:12px;
}
.primary-menu ul{ display:flex; gap:34px; flex-wrap:wrap; }
.primary-menu a{ font-size:1.15rem; color:var(--ink); font-weight:500; position:relative; padding-bottom:3px; }
.primary-menu a::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:var(--btn-buy); transform:scaleX(0); transform-origin:left;
  transition:transform .2s var(--ease);
}
.primary-menu a:hover{ color:var(--btn-buy); }
.primary-menu a:hover::after{ transform:scaleX(1); }
.header-links{ font-size:.95rem; color:var(--ink-soft); }
.header-links a:hover{ color:var(--ink); text-decoration:underline; }

/* ==========================================================================
   Layout: shop grid + sidebar
   ========================================================================== */
.shop-layout{
  max-width:var(--max-width); margin:0 auto; padding:30px 24px 10px;
  display:grid; grid-template-columns:1fr 280px; gap:36px; align-items:start;
}
.product-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:24px;
  min-width:0;
}
@media (max-width:960px){
  .shop-layout{ grid-template-columns:1fr; }
  .product-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px){
  .product-grid{ grid-template-columns:1fr; }
  .main-nav{ flex-direction:column; align-items:flex-start; }
  .primary-menu ul{ gap:20px; }
}

/* ==========================================================================
   Product card (the "curve box")
   ========================================================================== */
.product-card{
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:var(--radius-card);
  padding:14px;
  display:flex; flex-direction:column;
  min-width:0;
  box-shadow:var(--shadow-sm);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.product-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lift); }

.product-image{ position:relative; border-radius:6px; overflow:hidden; margin-bottom:12px; aspect-ratio:1/1; background:#111; }
.product-image img{ width:100%; height:100%; object-fit:cover; transition:transform .35s var(--ease); }
.product-card:hover .product-image img{ transform:scale(1.06); }

.badge{
  position:absolute; z-index:2; font-size:.72rem; font-weight:700; letter-spacing:.03em;
  padding:4px 8px; border-radius:4px; color:#fff;
  max-width:calc(100% - 16px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.badge-top-left{ top:8px; left:8px; background:var(--badge-dark); text-transform:uppercase; }
.badge-bottom-right{ bottom:8px; right:8px; background:var(--btn-buy); text-transform:uppercase; }

.product-title{
  font-size:1.02rem; font-weight:700; color:var(--ink); margin:0 0 12px;
  min-height:2.6em;
}
.product-title a:hover{ color:var(--btn-buy); }

.btn-buy{
  display:block; text-align:center; background:var(--btn-buy); color:#fff;
  font-weight:700; font-size:1.05rem; padding:12px; border-radius:6px; margin-bottom:10px;
  transition:background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.btn-buy:hover{ background:var(--btn-buy-hover); transform:translateY(-1px); box-shadow:0 6px 14px rgba(238,27,63,.28); }
.btn-buy:active{ transform:translateY(0); }
.btn-buy-large{ max-width:280px; font-size:1.15rem; padding:16px; }

.btn-more{
  display:block; text-align:center; background:var(--btn-more); color:var(--ink);
  font-weight:600; font-size:.95rem; padding:9px; border-radius:6px;
  transition:background .15s ease, transform .15s ease;
}
.btn-more:hover{ background:var(--btn-more-hover); transform:translateY(-1px); }

/* ==========================================================================
   Sidebar (shop + blog)
   ========================================================================== */
.sidebar{ padding-left:28px; border-left:1px solid var(--border-soft); min-width:0; }
@media (max-width:960px){
  .sidebar{ border-left:none; padding-left:0; margin-top:32px; padding-top:28px; border-top:1px solid var(--border-soft); }
}
.widget{ margin-bottom:26px; }
.widget-title{ font-size:1.1rem; font-weight:800; margin-bottom:12px; }

.sidebar .widget{
  background:var(--surface-soft); border:1px solid var(--border-soft);
  border-radius:var(--radius-sm); padding:20px;
}
.sidebar .widget-title{ padding-bottom:10px; border-bottom:2px solid var(--card-border); }
.sidebar .widget ul li{ padding:6px 0; color:var(--ink-soft); border-bottom:1px dashed var(--border-soft); }
.sidebar .widget ul li:last-child{ border-bottom:none; }
.sidebar .widget ul li a{ color:var(--ink-soft); display:block; transition:color .15s ease, padding-left .15s ease; }
.sidebar .widget ul li a:hover{ color:var(--btn-buy); padding-left:4px; }

/* সাইডবারে "সাম্প্রতিক পোস্ট" আইটেম */
.recent-post-item{ display:flex; gap:12px; padding:10px 0; border-bottom:1px dashed var(--border-soft); }
.recent-post-item:last-child{ border-bottom:none; }
.recent-post-thumb{ width:60px; height:60px; flex:none; border-radius:6px; overflow:hidden; }
.recent-post-thumb img{ width:100%; height:100%; object-fit:cover; }
.recent-post-info{ min-width:0; }
.recent-post-info h4{ font-size:.87rem; font-weight:700; margin:0 0 4px; line-height:1.35; }
.recent-post-info h4 a:hover{ color:var(--btn-buy); }
.recent-post-date{ font-size:.74rem; color:#9a9a9a; }

/* সাইডবারে "জনপ্রিয় প্রডাক্ট" মিনি-এফিলিয়েট কার্ড */
.mini-product{ display:flex; gap:12px; align-items:flex-start; padding:10px 0; border-bottom:1px dashed var(--border-soft); }
.mini-product:last-child{ border-bottom:none; }
.mini-product-thumb{ width:60px; height:60px; flex:none; border-radius:6px; overflow:hidden; background:#111; }
.mini-product-thumb img{ width:100%; height:100%; object-fit:cover; }
.mini-product-info{ min-width:0; }
.mini-product-info h4{ font-size:.87rem; font-weight:700; margin:0 0 6px; line-height:1.35; }
.mini-product-info h4 a:hover{ color:var(--btn-buy); }
.mini-buy{
  display:inline-block; font-size:.74rem; font-weight:700; color:#fff;
  background:var(--btn-buy); padding:5px 11px; border-radius:4px; transition:background .15s ease;
}
.mini-buy:hover{ background:var(--btn-buy-hover); }

/* ==========================================================================
   Single product / review page
   ========================================================================== */
.single-product-wrap{ max-width:var(--max-width); margin:0 auto; padding:36px 24px 60px; }
.single-product{ display:grid; grid-template-columns:460px 1fr; gap:44px; }
@media (max-width:800px){ .single-product{ grid-template-columns:1fr; } }
.single-product-image{ position:relative; border-radius:8px; overflow:hidden; background:var(--card-bg); padding:14px; }
.single-product-info h1{ font-size:1.9rem; }
.single-product-content{ color:var(--ink-soft); margin:16px 0 26px; }
.single-product-content p{ margin:0 0 1em; }

/* ==========================================================================
   Blog / archive listing  (+ ডান পাশে সাইডবার সহ প্রিমিয়াম লেআউট)
   ========================================================================== */
.blog-layout{
  max-width:var(--max-width); margin:0 auto; padding:40px 24px 20px;
  display:grid; grid-template-columns:1fr var(--sidebar-width); gap:48px; align-items:start;
}
@media (max-width:960px){
  .blog-layout{ grid-template-columns:1fr; padding:32px 20px 10px; }
}
.blog-list{ min-width:0; }
.blog-list h1{ margin-bottom:20px; }

.blog-item{
  padding:22px; margin-bottom:22px;
  background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius-card);
  box-shadow:var(--shadow-sm);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.blog-item:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.blog-item > a > img{ border-radius:8px; margin-bottom:16px; width:100%; }
.blog-item h2{ font-size:1.4rem; }
.blog-item h2 a:hover{ color:var(--btn-buy); }
.blog-meta{ color:var(--ink-soft); font-size:.85rem; margin-bottom:8px; }
.blog-excerpt{ color:var(--ink-soft); }
.read-more{ display:inline-block; margin-top:10px; font-weight:700; color:var(--btn-buy); transition:transform .15s ease; }
.read-more:hover{ transform:translateX(3px); }

/* একক ব্লগ/রিভিউ পোস্ট — ক্লাসের নাম ইচ্ছাকৃতভাবে "single-post" থেকে
   "varnilo-single-post" করা হয়েছে, কারণ WordPress নিজেই স্বয়ংক্রিয়ভাবে
   <body> ট্যাগে "single-post" ক্লাস যোগ করে (স্ট্যান্ডার্ড পোস্টের জন্য)।
   আগে দুটো ক্লাস একই নাম হওয়ায় পুরো <body> (ফুটার সহ) সংকুচিত/কাটা হয়ে যাচ্ছিল। */
.varnilo-single-post{ min-width:0; }
.varnilo-single-post h1{ font-size:2rem; }
.varnilo-single-post .blog-meta{ margin-bottom:24px; }
.varnilo-single-post .entry-content p{ margin:0 0 1.1em; color:var(--ink-soft); }
.varnilo-single-post .entry-content img{ border-radius:10px; margin:18px 0; }
.varnilo-single-post .entry-content a{ color:var(--btn-buy); text-decoration:underline; }

/* ==========================================================================
   Static pages (About / Privacy / Terms)
   ========================================================================== */
.static-page{ max-width:760px; margin:0 auto; padding:44px 24px 70px; }
.static-page h1{ font-size:2rem; margin-bottom:20px; }
.static-page .entry-content h2{ font-size:1.3rem; margin-top:1.6em; }
.static-page .entry-content p, .static-page .entry-content li{ color:var(--ink-soft); }
.static-page .entry-content li{ margin-bottom:.4em; }

/* ==========================================================================
   Pagination
   ========================================================================== */
.pagination{ margin:10px 0 50px; display:flex; gap:8px; flex-wrap:wrap; }
.pagination .page-numbers{ padding:9px 15px; border:1px solid var(--border-soft); border-radius:6px; color:var(--ink-soft); transition:all .15s ease; }
.pagination .page-numbers:hover{ border-color:var(--btn-buy); color:var(--btn-buy); }
.pagination .page-numbers.current{ background:var(--btn-buy); color:#fff; border-color:var(--btn-buy); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{ background:var(--footer-bg); color:var(--footer-ink); margin-top:50px; }
.footer-inner{
  max-width:var(--max-width); margin:0 auto; padding:44px 24px 20px;
  display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap;
}
.footer-brand{ min-width:0; max-width:100%; }
.footer-brand h2{ font-size:1.6rem; }
.footer-brand p{ color:#D8D8D8; max-width:420px; }
.footer-social{ min-width:0; }
.footer-social h3{ font-size:1.3rem; }
.footer-social .widget-title{ color:var(--footer-ink); }
.footer-links{ margin-top:14px; }
.footer-links a{ color:#D8D8D8; }
.footer-links a:hover{ color:#fff; text-decoration:underline; }
.copyright{ text-align:center; padding:16px 24px; border-top:1px solid rgba(255,255,255,.15); font-size:.85rem; color:#CFCFCF; margin:0; }

/* ==========================================================================
   404
   ========================================================================== */
.error-404{ max-width:600px; margin:80px auto; text-align:center; padding:0 24px; }

/* ==========================================================================
   ছোট মোবাইল স্ক্রিনের জন্য অতিরিক্ত সুরক্ষা (≤420px)
   যেনো কোনো এলিমেন্ট, বাটন বা টেক্সট স্ক্রিনের বাইরে না যায়
   ========================================================================== */
@media (max-width:420px){
  .container, .shop-layout, .blog-layout, .single-product-wrap, .static-page, .main-nav{ padding-left:16px; padding-right:16px; }
  .header-top{ padding:22px 16px 12px; }
  .site-logo{ font-size:2rem; }
  .product-grid{ gap:16px; }
  .product-card{ padding:12px; }
  .product-title{ font-size:.96rem; }
  .btn-buy{ font-size:.98rem; padding:11px; }
  .btn-more{ font-size:.9rem; }
  .blog-item{ padding:16px; }
  .blog-item h2{ font-size:1.2rem; }
  .varnilo-single-post h1{ font-size:1.5rem; }
  .single-product-info h1{ font-size:1.5rem; }
}