/* =========================================================
   GSM View — WordPress bridge CSS
   Styles for pieces that exist only in the WordPress rebuild
   (price/buy box, WP comment form, archive headers, mobile
   submenu expand state, overlay) — the original Blogger skin
   plus gsm-extra.css cover everything else.
   ========================================================= */

/* =========================================================
   Font Awesome 5→6 compatibility alias.
   The original theme's CSS hard-codes font-family:'Font Awesome 5 Free'
   on several pseudo-element icons (hamburger, search, submenu arrow,
   etc). We load Font Awesome 6 from cdnjs, which only registers the
   font under the name "Font Awesome 6 Free" — so without this alias
   those icons would render blank. Icon unicode codepoints are the
   same between v5 and v6, so this one alias fixes all of them.
   ========================================================= */
@font-face {
	font-family: 'Font Awesome 5 Free';
	font-style: normal;
	font-weight: 900;
	font-display: block;
	src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/webfonts/fa-solid-900.woff2') format('woff2'),
	     url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/webfonts/fa-solid-900.ttf') format('truetype');
}

/* Guarantee the Browse Categories bar is always visible with real height,
   on every screen size, even before JS finishes populating it — the
   original theme's CSS only force-showed this on desktop (>=981px). */
#gsm-browse-categories { display: block !important; width: 100%; box-sizing: border-box; }
#gsm-browse-categories .gsm-browse-scroll { display: flex !important; min-height: 38px; }

/* =========================================================
   Equal-height side-by-side card pairs.
   The 2-column grids already make each grid CELL match the row's
   tallest cell (CSS Grid default) — but the visible card box inside
   that cell only wrapped its own content, so a longer title made one
   card visibly taller than its shorter-title neighbor. This makes the
   card itself fill its cell, and keeps the Price/Compare row pinned to
   the bottom, so only differing titles change anything — no change to
   card width, border, image size, padding, or font when titles match.
   Applies per-row only (Grid's native behaviour), covers the main post
   grid and the Latest/Upcoming grids alike. */
#Blog1 .index-post-wrap > .blog-post { display: flex !important; }
#Blog1 .index-post-wrap > .blog-post .gsm-main-post-card {
	height: 100% !important;
	display: flex !important;
	flex-direction: column !important;
}
#Blog1 .index-post-wrap > .blog-post .gsm-main-post-card .post-info {
	display: flex !important;
	flex-direction: column !important;
	flex: 1 !important;
}
#Blog1 .index-post-wrap > .blog-post .gsm-main-post-card .gsm-post-actions {
	margin-top: auto !important;
}
.gsm-extra-grid .gsm-extra-card {
	height: 100% !important;
}

/* On the mobile homepage, the original theme pulls the whole
   #content-wrapper up by 40px to tighten whitespace above the post
   grid — but that same pull tucks the Browse Categories bar (the first
   thing inside it) behind the header, out of view. Cancelling the pull
   here moves the categories bar (and, along with it, the post grid
   below) down by that same 40px so the categories bar is fully visible. */
@media screen and (max-width: 680px) {
	body.home #content-wrapper {
		margin-top: 10px !important;
	}
}


/* Affiliate price / buy box on single posts */
.gsmview-price-box {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin: 16px 0;
	padding: 14px 18px;
	border-radius: 10px;
	background: #f3f6ff;
	border: 1px solid #dde6ff;
}
html.gsmview-dark .gsmview-price-box {
	background: #181b2a;
	border-color: #262b40;
}
.gsmview-price-box .gsmview-price {
	font-size: 20px;
	font-weight: 700;
	color: #204ecf;
}
.gsmview-price-box .gsmview-buy-btn {
	display: inline-block;
	padding: 10px 22px;
	border-radius: 6px;
	background: #204ecf;
	color: #fff !important;
	font-weight: 600;
	transition: background .15s ease;
}
.gsmview-price-box .gsmview-buy-btn:hover {
	background: #ff5555;
}

/* Mobile drawer overlay + expandable submenu */
.mobile-side-menu-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.55);
	z-index: 99991;
}
body.nav-active .mobile-side-menu-overlay { display: block; }
/* Submenu expand/collapse in the mobile drawer is now handled by the
   ported has-sub / m-sub / submenu-toggle rules already in the main
   skin CSS (inline display toggling via JS) — see main.js. */

/* =========================================================
   GSM VIEW — premium mobile menu close button (blue circle)
   Exact match to Blogger #gsm-arrow-close: same place, same size.
   ========================================================= */
#gsm-arrow-close{
	display:none;
	position:fixed;
	right:42px;
	top:calc(50% - 87px);
	top:calc(50dvh - 87px);
	transform:translateY(-50%);
	width:32px;
	height:32px;
	z-index:99999;
	border:1px solid rgba(255,255,255,.42);
	border-radius:50%;
	background:linear-gradient(145deg,#3b8cff 0%,#1976ff 55%,#0757d9 100%);
	color:#fff;
	font-size:0;
	line-height:48px;
	text-align:center;
	padding:0;
	cursor:pointer;
	-webkit-tap-highlight-color:transparent;
	box-shadow:0 8px 20px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.35);
	transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
	overflow:visible;
}
#gsm-arrow-close:before{
	content:'';
	position:absolute;
	left:50%;
	top:50%;
	width:13px;
	height:13px;
	border-left:3px solid #fff;
	border-bottom:3px solid #fff;
	transform:translate(-32%,-50%) rotate(45deg);
	filter:drop-shadow(0 1px 1px rgba(0,0,0,.25));
}
html.gsmview-dark #gsm-arrow-close:before,
html.gsmview-dark body #gsm-arrow-close::before{
	border-left-color:#fff!important;
	border-bottom-color:#fff!important;
}
#gsm-arrow-close:after{
	content:'';
	position:absolute;
	left:6px;
	right:6px;
	top:6px;
	height:12px;
	border-radius:50%;
	background:linear-gradient(to bottom,rgba(255,255,255,.28),rgba(255,255,255,0));
	pointer-events:none;
}
body.nav-active #gsm-arrow-close{
	display:block;
	animation:gsmArrowIn .22s ease-out both;
}
#gsm-arrow-close:hover{
	filter:brightness(1.08);
	box-shadow:0 10px 24px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.38);
}
#gsm-arrow-close:active{
	transform:translateY(-50%) scale(.90);
	box-shadow:0 4px 12px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.25);
}
@keyframes gsmArrowIn{
	from{opacity:0;transform:translateY(-50%) scale(.72);}
	to{opacity:1;transform:translateY(-50%) scale(1);}
}
@media (max-width:767px){
	#gsm-arrow-close{right:30px;}
}
/* Tablet / emulated desktop — button sits just outside 300px drawer */
@media (min-width:768px) and (max-width:980px){
	#gsm-arrow-close{
		right:auto!important;
		left:297px!important;
		top:calc(50% - 655px)!important;
		top:calc(50dvh - 655px)!important;
		transform:translateY(-50%)!important;
	}
	#gsm-arrow-close:active{
		transform:translateY(-50%) scale(.90)!important;
	}
	body.nav-active #gsm-arrow-close{
		display:block!important;
		animation:gsmArrowInDesk .22s ease-out both;
	}
}
/* Genuine desktop width */
@media (min-width:981px){
	#gsm-arrow-close{
		right:auto!important;
		left:297px!important;
		top:calc(50% - 58px)!important;
		top:calc(50dvh - 58px)!important;
		transform:translateY(-50%)!important;
	}
	#gsm-arrow-close:active{
		transform:translateY(-50%) scale(.90)!important;
	}
	body.nav-active #gsm-arrow-close{
		display:block!important;
		animation:gsmArrowInDesk .22s ease-out both;
	}
}
@keyframes gsmArrowInDesk{
	from{opacity:0;transform:translateY(-50%) scale(.72);}
	to{opacity:1;transform:translateY(-50%) scale(1);}
}

/* Empty-state note for Latest/Upcoming when no posts assigned yet */
.gsm-empty-note {
	padding: 20px;
	color: #767676;
	font-size: 14px;
}

/* Archive / search results header */
.archive-header { margin: 10px 0 20px; }
.archive-header .archive-title { font-size: 24px; font-weight: 700; margin: 0 0 6px; }
.archive-header .archive-description { color: #656565; }

/* Post navigation labels (prev/next) */
.post-nav li p { margin: 2px 0 0; }

/* Related posts grid (WordPress reuses .related-posts already styled by the
   original skin — this just ensures a sane default if that block is skipped) */
ul.related-posts { display: flex; flex-wrap: wrap; gap: 14px; list-style: none; margin: 20px 0 0; padding: 0; }
.related-posts .related-item { width: calc(50% - 7px); }

/* WordPress default comment form fields need basic sizing since the theme's
   original comment CSS targeted Blogger's iframe-based comment system */
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	margin-bottom: 12px;
	border: 1px solid #dcdcdc;
	border-radius: 6px;
	font-family: inherit;
	font-size: 14px;
}
.comment-form textarea { min-height: 120px; }
.comment-reply-title { font-size: 20px; margin-bottom: 10px; }
.comment-list { list-style: none; margin: 0 0 20px; padding: 0; }
.comment-list .comment-body { padding: 14px 0; border-bottom: 1px solid #eee; }
.comment-list .comment-author img { border-radius: 50%; vertical-align: middle; margin-right: 8px; }
html.gsmview-dark .comment-list .comment-body { border-color: #262b40; }

/* =========================================================
   Latest / Upcoming section buttons — exact XML look
   Text: "Latest" / "Upcoming"
   Icons via :before (star \f005 / calendar \f073)
   ========================================================= */
#gsm-latest-section .gsm-extra-title h3.gsm-section-button,
#gsm-upcoming-section .gsm-extra-title h3.gsm-section-button{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:auto!important;
  min-width:0!important;
  height:31px!important;
  margin:0!important;
  padding:0 14px!important;
  border:0!important;
  border-radius:5px!important;
  background:#2563eb!important;
  color:#fff!important;
  font-size:13px!important;
  line-height:31px!important;
  font-weight:700!important;
  text-transform:none!important;
  box-sizing:border-box!important;
}
#gsm-latest-section .gsm-extra-title h3.gsm-section-button:before,
#gsm-latest-section .gsm-extra-title h3:before{
  content:"\f005"!important;
  font-family:"Font Awesome 5 Free"!important;
  font-weight:900!important;
  margin-right:7px!important;
  font-size:13px!important;
  color:#fff!important;
  display:inline-block!important;
}
#gsm-upcoming-section .gsm-extra-title h3.gsm-section-button:before,
#gsm-upcoming-section .gsm-extra-title h3:before{
  content:"\f073"!important;
  font-family:"Font Awesome 5 Free"!important;
  font-weight:900!important;
  margin-right:7px!important;
  font-size:13px!important;
  color:#fff!important;
  display:inline-block!important;
}

/* Homepage: remove sidebar + footer widget post clutter */
body.home #sidebar-wrapper,
body.blog #sidebar-wrapper,
.home #sidebar-wrapper,
.blog #sidebar-wrapper{
  display:none!important;
}
body.home #main-wrapper,
body.blog #main-wrapper{
  width:100%!important;
  max-width:100%!important;
  float:none!important;
}
#footer-wrapper .footer-widgets-wrap{
  display:none!important;
}

/* Fix: do NOT pull Latest under the main posts (was margin-top:-113px) */
@media screen and (max-width:440px){
  .gsm-extra-sections{
    margin-top:18px!important;
  }
}
#gsm-latest-section,
#gsm-upcoming-section{
  display:block!important;
  visibility:visible!important;
}
#gsm-latest-section .gsm-extra-title,
#gsm-upcoming-section .gsm-extra-title,
#gsm-latest-section .gsm-extra-title h3.gsm-section-button,
#gsm-upcoming-section .gsm-extra-title h3.gsm-section-button{
  display:inline-flex!important;
  visibility:visible!important;
  opacity:1!important;
}
#gsm-latest-upcoming,
#gsm-extra-sections{
  display:block!important;
  visibility:visible!important;
}

/* Latest section sits 20px lower than the tight-under-main-posts default
   (unchanged from before — this section and everything above it, i.e.
   #main-wrapper / the main page posts, must not move at all). */
#gsm-latest-upcoming{
  padding-top:0!important;
}
#gsm-latest-section{
  transform:translateY(20px)!important;
}
/* Upcoming section (and everything inside it, e.g. its own pagination)
   sits 10px higher than the Latest section above it — i.e. 10px lower than
   the original default, instead of 20px (moved 5px closer to Latest total,
   up from the previous 12px). Using transform (not margin) so it's immune
   to margin collapsing and never shifts #gsm-latest-section or anything
   above it. */
#gsm-upcoming-section{
  transform:translateY(10px)!important;
}
#gsm-extra-sections{
  margin-top:0!important;
  padding-top:0!important;
}
.gsm-extra-sections{
  margin:0!important;
}
body.home #main-wrapper,
body.blog #main-wrapper{
  margin-bottom:0!important;
  padding-bottom:0!important;
}
body.home #blog-pager,
body.blog #blog-pager,
body.home .blog-pager,
body.blog .blog-pager{
  margin-bottom:8px!important;
  margin-top:8px!important;
  padding-bottom:0!important;
}
#gsm-latest-section{
  margin-top:0!important;
  padding-top:4px!important;
}
@media screen and (max-width:680px){
  #gsm-latest-upcoming{
    padding-top:0!important;
  }
  .gsm-extra-sections{
    margin-top:0!important;
    padding-top:0!important;
  }
}
@media screen and (max-width:440px){
  .gsm-extra-sections{
    margin-top:0!important;
  }
}

/* Browse Categories left/right scroll arrows: real mouse-driven desktops
   only. A phone using "Request desktop site" reports a wide viewport
   too, but is still a touch/no-hover device — this keeps the arrows
   off for it, exactly like the normal mobile view, and only shows them
   for actual laptops/desktops with a real mouse pointer. */
@media screen and (min-width: 981px) and (hover: none),
       screen and (min-width: 981px) and (pointer: coarse) {
	#gsm-browse-categories .gsm-browse-arrow {
		display: none !important;
	}
}

/* ---- Related / More From <Brand> (sideways-scrollable rows under single posts) ---- */
.gsm-hs{margin:16px 0 8px;background:#fff;border-radius:8px;box-shadow:0 1px 5px rgba(0,0,0,.08);overflow:hidden;}
.gsm-hs-title{margin:0;padding:12px 14px;font-size:16px;font-weight:800;text-transform:uppercase;letter-spacing:.2px;color:#2563eb;border-bottom:1px solid #e3e7ee;}
.gsm-hs-wrap{position:relative;}
.gsm-hs-track{display:flex;gap:10px;overflow-x:auto;overflow-y:hidden;padding:12px 14px 14px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:thin;}
.gsm-hs-track .gsm-extra-card{
  flex:0 0 44%;min-width:0;box-sizing:border-box;margin:0;padding:8px;scroll-snap-align:start;
  border:1px solid #edf0f4;border-radius:8px;background:#fff;box-shadow:0 1px 5px rgba(0,0,0,.08);
  display:flex;flex-direction:column;float:none;position:relative;
}
.gsm-hs-track .gsm-extra-card .gsm-extra-image{width:100%;aspect-ratio:3 / 4;margin:0;padding:0;overflow:hidden;display:block;}
.gsm-hs-track .gsm-extra-card .gsm-extra-image img{width:100%;height:100%;max-width:none;object-fit:cover;object-position:center;display:block;}
@media screen and (min-width:681px){.gsm-hs-track .gsm-extra-card{flex-basis:180px;}}
.gsm-hs-arrow{display:none!important;}
@media screen and (min-width:681px){
  .gsm-hs-arrow{display:flex!important;align-items:center;justify-content:center;position:absolute!important;top:42%;z-index:5;width:36px;height:36px;padding:0;margin:0;border:0;border-radius:50%;background:rgba(0,0,0,.65);color:#fff;font-size:26px;line-height:1;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.35);}
  .gsm-hs-prev{left:6px;}
  .gsm-hs-next{right:6px;}
  .gsm-hs-arrow.gsm-hs-off{opacity:.3;pointer-events:none;}
}
html.gsmview-dark .gsm-hs-arrow{background:rgba(255,255,255,.28)!important;}
html.gsmview-dark .gsm-hs{background:#171a21;}
html.gsmview-dark .gsm-hs-title{border-bottom-color:#303641;}
html.gsmview-dark .gsm-hs-track .gsm-extra-card{background:#171a21;border-color:#303641;}