/*
Theme Name: Tech With Pi
Theme URI: https://example.com/tech-with-pi
Author: Tech With Pi
Author URI: https://example.com
Description: A premium technology publication and commerce theme for guides, reviews, tutorials, comparisons, DIY projects and an online store. Fully WooCommerce compatible, Gutenberg-ready, translation-ready and built with accessibility and SEO best practices in mind.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: techwithpi
Tags: blog, e-commerce, two-columns, three-columns, grid-layout, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, accessibility-ready, block-patterns

Tech With Pi WordPress Theme, Copyright 2026
Tech With Pi is distributed under the terms of the GNU GPL.
*/

/* =====================================================
   ROOT VARIABLES
===================================================== */
:root{
  --twp-primary:#1a56db;
  --twp-primary-dark:#123a99;
  --twp-accent:#00c2a8;
  --twp-ink:#12151c;
  --twp-body:#3a3f4b;
  --twp-muted:#6b7280;
  --twp-border:#e5e7eb;
  --twp-bg:#ffffff;
  --twp-bg-alt:#f6f8fb;
  --twp-success:#16a34a;
  --twp-warning:#d97706;
  --twp-danger:#dc2626;
  --twp-radius:10px;
  --twp-radius-lg:16px;
  --twp-shadow:0 1px 3px rgba(18,21,28,.08), 0 1px 2px rgba(18,21,28,.04);
  --twp-shadow-lg:0 10px 25px rgba(18,21,28,.08);
  --twp-max:1240px;
  --twp-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --twp-font-head: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* =====================================================
   RESET / BASE
===================================================== */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--twp-font-body);
  color:var(--twp-body);
  background:var(--twp-bg);
  line-height:1.65;
  font-size:16px;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--twp-primary);text-decoration:none;}
a:hover{color:var(--twp-primary-dark);text-decoration:underline;}
h1,h2,h3,h4,h5,h6{
  font-family:var(--twp-font-head);
  color:var(--twp-ink);
  line-height:1.25;
  font-weight:700;
  margin:0 0 .6em;
}
h1{font-size:2.4rem;}
h2{font-size:1.85rem;}
h3{font-size:1.4rem;}
h4{font-size:1.15rem;}
p{margin:0 0 1.2em;}
ul,ol{padding-left:1.4em;}
button,input,select,textarea{font-family:inherit;font-size:1rem;}
table{border-collapse:collapse;width:100%;}

/* Skip link */
.skip-link{
  position:absolute;left:-9999px;top:0;background:var(--twp-ink);color:#fff;
  padding:.75em 1.25em;z-index:100000;border-radius:0 0 6px 0;
}
.skip-link:focus{left:0;}

/* Focus states */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--twp-accent);
  outline-offset:2px;
}

.screen-reader-text{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);white-space:nowrap;border:0;padding:0;margin:-1px;
}

/* =====================================================
   LAYOUT
===================================================== */
.twp-container{max-width:var(--twp-max);margin:0 auto;padding:0 24px;}
.twp-section{padding:56px 0;}
.twp-section-alt{background:var(--twp-bg-alt);}
.twp-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:28px;flex-wrap:wrap;}
.twp-section-head h2{margin:0;}
.twp-section-sub{color:var(--twp-muted);margin-top:6px;}
.twp-link-more{font-weight:600;white-space:nowrap;}

/* =====================================================
   HEADER
===================================================== */
.site-header{
  position:sticky;top:0;z-index:999;background:rgba(255,255,255,.96);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--twp-border);
}
.site-header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px 0;}
.site-branding{display:flex;align-items:center;gap:10px;}
.site-branding img.custom-logo{max-height:42px;width:auto;}
.site-title{font-size:1.4rem;font-weight:800;color:var(--twp-ink);margin:0;letter-spacing:-.02em;}
.site-title a{color:inherit;text-decoration:none;}
.site-description{font-size:.75rem;color:var(--twp-muted);margin:0;}

.primary-navigation{display:flex;align-items:center;gap:6px;}
.primary-menu{display:flex;list-style:none;margin:0;padding:0;gap:2px;}
.primary-menu li{position:relative;}
.primary-menu a{
  display:block;padding:10px 14px;color:var(--twp-body);font-weight:600;
  font-size:.95rem;border-radius:8px;
}
.primary-menu a:hover,.primary-menu .current-menu-item>a{
  color:var(--twp-primary);background:var(--twp-bg-alt);text-decoration:none;
}
.primary-menu ul.sub-menu{
  display:none;position:absolute;top:100%;left:0;background:#fff;min-width:220px;
  box-shadow:var(--twp-shadow-lg);border-radius:10px;padding:8px;list-style:none;margin:0;border:1px solid var(--twp-border);
}
.primary-menu li:hover>ul.sub-menu,.primary-menu li:focus-within>ul.sub-menu{display:block;}
.primary-menu .sub-menu a{padding:8px 12px;border-radius:6px;}

.header-actions{display:flex;align-items:center;gap:8px;}
.header-icon-btn{
  background:none;border:1px solid var(--twp-border);border-radius:8px;width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--twp-ink);
}
.header-icon-btn:hover{background:var(--twp-bg-alt);}
.menu-toggle{display:none;}

.header-search-panel{
  display:none;border-top:1px solid var(--twp-border);background:#fff;padding:16px 0;
}
.header-search-panel.is-open{display:block;}
.header-search-panel form{display:flex;max-width:640px;margin:0 auto;gap:8px;}
.header-search-panel input[type="search"]{flex:1;padding:10px 14px;border:1px solid var(--twp-border);border-radius:8px;}
.header-search-panel button{padding:10px 18px;background:var(--twp-primary);color:#fff;border:none;border-radius:8px;font-weight:600;cursor:pointer;}

/* =====================================================
   BUTTONS
===================================================== */
.twp-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 22px;border-radius:8px;font-weight:700;font-size:.95rem;
  border:2px solid transparent;cursor:pointer;text-decoration:none;transition:transform .12s ease;
}
.twp-btn:hover{text-decoration:none;transform:translateY(-1px);}
.twp-btn-primary{background:var(--twp-primary);color:#fff;}
.twp-btn-primary:hover{background:var(--twp-primary-dark);color:#fff;}
.twp-btn-outline{background:transparent;border-color:var(--twp-ink);color:var(--twp-ink);}
.twp-btn-outline:hover{background:var(--twp-ink);color:#fff;}
.twp-btn-sm{padding:8px 14px;font-size:.85rem;}

/* =====================================================
   HERO
===================================================== */
.twp-hero{
  background:linear-gradient(160deg,var(--twp-bg-alt) 0%,#ffffff 60%);
  padding:72px 0;border-bottom:1px solid var(--twp-border);
}
.twp-hero-inner{max-width:760px;}
.twp-hero-eyebrow{
  display:inline-block;background:#e8f0fe;color:var(--twp-primary);font-weight:700;
  font-size:.8rem;padding:6px 12px;border-radius:999px;margin-bottom:16px;letter-spacing:.02em;
}
.twp-hero h1{font-size:clamp(2.1rem,4vw,3.2rem);margin-bottom:.4em;}
.twp-hero p{font-size:1.15rem;color:var(--twp-muted);margin-bottom:1.6em;}
.twp-hero-actions{display:flex;gap:14px;flex-wrap:wrap;}

/* =====================================================
   CARDS / ARTICLE GRID
===================================================== */
.twp-grid{display:grid;gap:24px;}
.twp-grid-3{grid-template-columns:repeat(3,1fr);}
.twp-grid-4{grid-template-columns:repeat(4,1fr);}
.twp-grid-2{grid-template-columns:repeat(2,1fr);}

.twp-card{
  background:#fff;border:1px solid var(--twp-border);border-radius:var(--twp-radius-lg);
  overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .15s ease,transform .15s ease;
}
.twp-card:hover{box-shadow:var(--twp-shadow-lg);transform:translateY(-2px);}
.twp-card-media{aspect-ratio:16/10;overflow:hidden;background:var(--twp-bg-alt);}
.twp-card-media img{width:100%;height:100%;object-fit:cover;}
.twp-card-body{padding:18px;display:flex;flex-direction:column;gap:8px;flex:1;}
.twp-card-cat{
  font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--twp-primary);
}
.twp-card-title{font-size:1.05rem;margin:0;}
.twp-card-title a{color:var(--twp-ink);}
.twp-card-title a:hover{color:var(--twp-primary);text-decoration:none;}
.twp-card-excerpt{color:var(--twp-muted);font-size:.92rem;margin:0;}
.twp-card-meta{
  display:flex;align-items:center;gap:10px;font-size:.8rem;color:var(--twp-muted);margin-top:auto;padding-top:10px;
}
.twp-card-meta span{display:inline-flex;align-items:center;gap:4px;}

/* =====================================================
   FEATURED / SPOTLIGHT ROW
===================================================== */
.twp-featured-row{display:grid;grid-template-columns:1.4fr 1fr;gap:24px;}
.twp-featured-main{position:relative;border-radius:var(--twp-radius-lg);overflow:hidden;min-height:420px;background:var(--twp-ink);}
.twp-featured-main img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;}
.twp-featured-main-content{position:relative;z-index:2;padding:32px;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;height:100%;}
.twp-featured-main-content .twp-card-cat{color:var(--twp-accent);}
.twp-featured-main-content h3{color:#fff;font-size:1.7rem;}
.twp-featured-side{display:flex;flex-direction:column;gap:16px;}

/* =====================================================
   SINGLE ARTICLE
===================================================== */
.twp-breadcrumbs{font-size:.85rem;color:var(--twp-muted);margin-bottom:18px;}
.twp-breadcrumbs a{color:var(--twp-muted);}
.twp-article-header{max-width:820px;margin:0 auto 24px;text-align:left;}
.twp-article-header .twp-card-cat{margin-bottom:10px;display:block;}
.twp-article-header h1{font-size:clamp(1.9rem,3.5vw,2.6rem);}
.twp-article-excerpt{font-size:1.1rem;color:var(--twp-muted);}
.twp-article-meta{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:16px 0;
  border-top:1px solid var(--twp-border);border-bottom:1px solid var(--twp-border);margin:20px 0;font-size:.88rem;color:var(--twp-muted);
}
.twp-article-meta img.avatar{border-radius:999px;width:36px;height:36px;}
.twp-article-meta strong{color:var(--twp-ink);}
.twp-article-featured-image{border-radius:var(--twp-radius-lg);overflow:hidden;margin:24px 0;max-width:900px;margin-left:auto;margin-right:auto;}

.twp-toc{
  background:var(--twp-bg-alt);border:1px solid var(--twp-border);border-radius:var(--twp-radius);
  padding:18px 22px;max-width:820px;margin:0 auto 28px;
}
.twp-toc h2{font-size:1rem;margin-bottom:.6em;text-transform:uppercase;letter-spacing:.04em;}
.twp-toc ol{margin:0;padding-left:1.2em;}
.twp-toc a{font-weight:600;}

.twp-article-content{max-width:820px;margin:0 auto;}
.twp-article-content h2{margin-top:1.6em;}
.twp-article-content h3{margin-top:1.3em;}
.twp-article-content img{border-radius:var(--twp-radius);margin:1.4em 0;}
.twp-article-content blockquote{
  border-left:4px solid var(--twp-primary);margin:1.6em 0;padding:.4em 1.2em;color:var(--twp-muted);font-style:italic;
}
.twp-article-content pre{background:#0f1117;color:#e5e7eb;padding:18px;border-radius:var(--twp-radius);overflow:auto;}
.twp-article-content code{background:var(--twp-bg-alt);padding:.15em .4em;border-radius:4px;font-size:.9em;}
.twp-article-content pre code{background:none;padding:0;}
.twp-article-content table{margin:1.4em 0;}
.twp-article-content table th,.twp-article-content table td{border:1px solid var(--twp-border);padding:10px 12px;text-align:left;}
.twp-article-content table th{background:var(--twp-bg-alt);}

.twp-affiliate-disclosure{
  max-width:820px;margin:0 auto 20px;background:#fff8e1;border:1px solid #f1d78c;color:#7a5c00;
  padding:12px 16px;border-radius:8px;font-size:.85rem;
}

.twp-share{max-width:820px;margin:32px auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.twp-share span{font-weight:700;color:var(--twp-ink);margin-right:4px;}
.twp-share a{
  border:1px solid var(--twp-border);border-radius:8px;padding:8px 14px;font-size:.85rem;font-weight:600;color:var(--twp-ink);
}
.twp-share a:hover{background:var(--twp-bg-alt);text-decoration:none;}

.twp-newsletter-cta{
  max-width:820px;margin:32px auto;background:var(--twp-ink);color:#fff;border-radius:var(--twp-radius-lg);
  padding:28px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
}
.twp-newsletter-cta h3{color:#fff;margin:0 0 4px;}
.twp-newsletter-cta p{color:#c7cbd4;margin:0;}
.twp-newsletter-cta form{display:flex;gap:8px;}
.twp-newsletter-cta input[type=email]{padding:10px 14px;border-radius:8px;border:none;min-width:220px;}

.twp-prev-next{max-width:820px;margin:32px auto;display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.twp-prev-next a{
  border:1px solid var(--twp-border);border-radius:var(--twp-radius);padding:16px;display:block;
}
.twp-prev-next a:hover{background:var(--twp-bg-alt);text-decoration:none;}
.twp-prev-next .twp-nav-label{font-size:.75rem;text-transform:uppercase;color:var(--twp-muted);font-weight:700;}
.twp-prev-next .next-post{text-align:right;}

.twp-author-box{
  max-width:820px;margin:32px auto;display:flex;gap:18px;background:var(--twp-bg-alt);
  border-radius:var(--twp-radius-lg);padding:24px;align-items:flex-start;
}
.twp-author-box img{border-radius:999px;width:72px;height:72px;object-fit:cover;flex-shrink:0;}
.twp-author-box h3{margin:0 0 4px;}
.twp-author-social{display:flex;gap:10px;margin-top:8px;}

.twp-related{max-width:900px;margin:40px auto;}

/* =====================================================
   REVIEW TEMPLATE
===================================================== */
.twp-review-header{
  display:grid;grid-template-columns:1fr 1.4fr;gap:28px;background:var(--twp-bg-alt);
  border:1px solid var(--twp-border);border-radius:var(--twp-radius-lg);padding:24px;margin:0 auto 30px;max-width:900px;
}
.twp-review-rating-badge{
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--twp-primary);color:#fff;border-radius:var(--twp-radius);padding:14px 18px;font-weight:800;
  width:90px;
}
.twp-review-rating-badge .twp-score{font-size:1.8rem;line-height:1;}
.twp-review-rating-badge .twp-score-max{font-size:.75rem;opacity:.85;}
.twp-review-summary-list{list-style:none;padding:0;margin:10px 0;}
.twp-review-summary-list li{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px dashed var(--twp-border);font-size:.9rem;}
.twp-proscons{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:900px;margin:0 auto 30px;}
.twp-pros,.twp-cons{border-radius:var(--twp-radius);padding:18px 20px;}
.twp-pros{background:#eafaf0;border:1px solid #b9ecc9;}
.twp-cons{background:#fdeeee;border:1px solid #f4c5c5;}
.twp-pros h3{color:var(--twp-success);}
.twp-cons h3{color:var(--twp-danger);}
.twp-pros ul,.twp-cons ul{margin:0;padding-left:1.2em;}
.twp-specs-table{max-width:900px;margin:0 auto 30px;}
.twp-verdict-box{
  max-width:900px;margin:0 auto 30px;border:2px solid var(--twp-primary);border-radius:var(--twp-radius-lg);padding:22px 26px;
}
.twp-verdict-box h3{color:var(--twp-primary);}

/* =====================================================
   COMPARISON TEMPLATE
===================================================== */
.twp-compare-wrap{max-width:1000px;margin:0 auto 30px;overflow-x:auto;}
.twp-compare-table{width:100%;min-width:640px;}
.twp-compare-table th,.twp-compare-table td{border:1px solid var(--twp-border);padding:12px 14px;text-align:left;vertical-align:top;}
.twp-compare-table thead th{background:var(--twp-bg-alt);}
.twp-compare-table .twp-winner{background:#eafaf0;font-weight:700;}
.twp-compare-header-cards{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:center;max-width:900px;margin:0 auto 24px;}
.twp-compare-vs{font-weight:800;color:var(--twp-muted);font-size:1.4rem;}

/* =====================================================
   BUYING GUIDE
===================================================== */
.twp-buying-item{
  display:grid;grid-template-columns:220px 1fr;gap:22px;border:1px solid var(--twp-border);
  border-radius:var(--twp-radius-lg);padding:22px;margin-bottom:20px;max-width:900px;margin-left:auto;margin-right:auto;
}
.twp-buying-item img{border-radius:var(--twp-radius);}
.twp-buying-item h3{margin-bottom:6px;}

/* =====================================================
   TOOLS PAGE
===================================================== */
.twp-tools-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.twp-tool-card{border:1px solid var(--twp-border);border-radius:var(--twp-radius-lg);padding:22px;text-align:left;background:#fff;}
.twp-tool-card .twp-tool-icon{
  width:44px;height:44px;border-radius:10px;background:var(--twp-bg-alt);display:flex;align-items:center;
  justify-content:center;margin-bottom:14px;color:var(--twp-primary);font-weight:800;
}
.twp-tool-card h3{margin-bottom:6px;}
.twp-tool-card p{font-size:.9rem;color:var(--twp-muted);margin-bottom:14px;}

/* =====================================================
   SIDEBAR / WIDGETS
===================================================== */
.twp-content-layout{display:grid;grid-template-columns:2.4fr 1fr;gap:40px;align-items:start;}
.widget{margin-bottom:28px;border:1px solid var(--twp-border);border-radius:var(--twp-radius);padding:20px;}
.widget-title{font-size:.95rem;text-transform:uppercase;letter-spacing:.04em;margin-bottom:14px;}
.widget ul{list-style:none;padding:0;margin:0;}
.widget ul li{padding:8px 0;border-bottom:1px solid var(--twp-border);}
.widget ul li:last-child{border-bottom:none;}

/* Ad slots */
.twp-ad-slot{
  border:1px dashed var(--twp-border);border-radius:var(--twp-radius);padding:14px;text-align:center;
  color:var(--twp-muted);font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;margin:24px 0;background:var(--twp-bg-alt);
}

/* =====================================================
   COMMENTS
===================================================== */
.comments-area{max-width:820px;margin:40px auto;}
.comment-list{list-style:none;margin:0;padding:0;}
.comment-list .children{list-style:none;padding-left:40px;}
.comment-body{border-bottom:1px solid var(--twp-border);padding:20px 0;}
.comment-author img{border-radius:999px;}
.comment-meta{font-size:.85rem;color:var(--twp-muted);}
.comment-respond input,.comment-respond textarea{
  width:100%;padding:10px 14px;border:1px solid var(--twp-border);border-radius:8px;margin-bottom:14px;
}
.comment-reply-title{margin-bottom:6px;}

/* =====================================================
   FOOTER
===================================================== */
.site-footer{background:var(--twp-ink);color:#c7cbd4;margin-top:60px;}
.site-footer a{color:#e5e7eb;}
.site-footer a:hover{color:#fff;}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;padding:56px 0 32px;}
.footer-col h3{color:#fff;font-size:.9rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:16px;}
.footer-col ul{list-style:none;padding:0;margin:0;}
.footer-col ul li{margin-bottom:10px;}
.footer-desc{color:#9aa0ad;font-size:.9rem;}
.footer-social{display:flex;gap:10px;margin-top:16px;}
.footer-social a{
  width:36px;height:36px;border-radius:999px;border:1px solid #383e4b;display:flex;
  align-items:center;justify-content:center;font-size:.8rem;font-weight:700;
}
.footer-newsletter{padding:28px 0;border-top:1px solid #2a2f3a;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;}
.footer-bottom{border-top:1px solid #2a2f3a;padding:20px 0;font-size:.82rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;}

/* =====================================================
   WOOCOMMERCE
===================================================== */
.woocommerce ul.products{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;list-style:none;padding:0;}
.woocommerce ul.products li.product{
  border:1px solid var(--twp-border);border-radius:var(--twp-radius-lg);padding:16px;text-align:left;
}
.woocommerce ul.products li.product img{border-radius:var(--twp-radius);margin-bottom:10px;}
.woocommerce ul.products li.product .price{color:var(--twp-primary);font-weight:800;}
.woocommerce span.onsale{
  background:var(--twp-accent);color:#fff;border-radius:6px;padding:2px 8px;font-size:.75rem;font-weight:700;
}
.woocommerce a.button, .woocommerce button.button, .woocommerce #respond input#submit{
  background:var(--twp-primary);color:#fff;border-radius:8px;padding:10px 18px;font-weight:700;border:none;
}
.woocommerce a.button:hover, .woocommerce button.button:hover{background:var(--twp-primary-dark);color:#fff;}
.woocommerce div.product div.images{border-radius:var(--twp-radius-lg);overflow:hidden;}
.woocommerce table.shop_table{border:1px solid var(--twp-border);border-radius:var(--twp-radius);}

/* =====================================================
   404 / SEARCH
===================================================== */
.twp-404{text-align:center;padding:80px 0;}
.twp-404 h1{font-size:3rem;}

/* =====================================================
   PAGINATION
===================================================== */
.twp-pagination{display:flex;gap:8px;justify-content:center;margin:40px 0;flex-wrap:wrap;}
.twp-pagination a,.twp-pagination span{
  border:1px solid var(--twp-border);border-radius:8px;padding:8px 14px;font-weight:600;color:var(--twp-ink);
}
.twp-pagination .current{background:var(--twp-primary);color:#fff;border-color:var(--twp-primary);}
.twp-pagination a:hover{background:var(--twp-bg-alt);text-decoration:none;}

/* =====================================================
   RESPONSIVE
===================================================== */
@media (max-width:1024px){
  .twp-grid-4{grid-template-columns:repeat(2,1fr);}
  .twp-grid-3{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .twp-content-layout{grid-template-columns:1fr;}
  .twp-featured-row{grid-template-columns:1fr;}
  .woocommerce ul.products{grid-template-columns:repeat(2,1fr);}
  .twp-tools-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:782px){
  .primary-navigation{
    position:fixed;top:0;right:-100%;height:100vh;width:82%;max-width:340px;background:#fff;
    flex-direction:column;align-items:flex-start;padding:80px 24px 24px;transition:right .25s ease;
    box-shadow:var(--twp-shadow-lg);overflow-y:auto;z-index:1001;
  }
  .primary-navigation.is-open{right:0;}
  .primary-menu{flex-direction:column;width:100%;gap:0;}
  .primary-menu a{padding:12px 8px;border-bottom:1px solid var(--twp-border);border-radius:0;}
  .primary-menu ul.sub-menu{position:static;box-shadow:none;border:none;padding-left:14px;display:none;}
  .primary-menu li.menu-item-expanded ul.sub-menu{display:block;}
  .menu-toggle{
    display:flex;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid var(--twp-border);
    border-radius:8px;background:none;cursor:pointer;
  }
  .nav-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:1000;}
  .nav-overlay.is-open{display:block;}
  .twp-grid-4,.twp-grid-3,.twp-grid-2{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;padding:40px 0 20px;}
  .woocommerce ul.products{grid-template-columns:1fr;}
  .twp-tools-grid{grid-template-columns:1fr;}
  .twp-review-header{grid-template-columns:1fr;}
  .twp-proscons{grid-template-columns:1fr;}
  .twp-buying-item{grid-template-columns:1fr;}
  .twp-prev-next{grid-template-columns:1fr;}
  h1{font-size:1.9rem;}
  .twp-section{padding:36px 0;}
}