/*
Theme Name:   Kemeishop Child
Theme URI:    https://kemeishop.pk
Description:  Kemeishop Child Theme for GeneratePress — Pakistan's #1 Kemei Grooming Store
Author:       Kemeishop
Author URI:   https://kemeishop.pk
Template:     generatepress
Version:      1.0.0
License:      GNU General Public License v2 or later
Text Domain:  kemeishop-child
*/

/* ================================================================
   CSS CUSTOM PROPERTIES
   ================================================================ */
:root {
	--ks-black:       #0D0D0D;
	--ks-dark:        #161616;
	--ks-dark-2:      #1F1F1F;
	--ks-dark-3:      #2A2A2A;
	--ks-red:         #CC0000;
	--ks-red-dark:    #A30000;
	--ks-red-light:   #E60000;
	--ks-white:       #FFFFFF;
	--ks-off-white:   #FAFAFA;
	--ks-gray-50:     #F5F5F5;
	--ks-gray-100:    #EBEBEB;
	--ks-gray-200:    #DDDDDD;
	--ks-gray-400:    #AAAAAA;
	--ks-gray-600:    #777777;
	--ks-gray-800:    #444444;
	--ks-green:       #25D366;

	--ks-font-display: 'Bebas Neue', sans-serif;
	--ks-font-body:    'DM Sans', sans-serif;

	--ks-radius-xs:   3px;
	--ks-radius-sm:   6px;
	--ks-radius:      10px;
	--ks-radius-lg:   16px;
	--ks-radius-xl:   24px;

	--ks-shadow-xs:   0 1px 4px rgba(0,0,0,0.06);
	--ks-shadow-sm:   0 2px 10px rgba(0,0,0,0.09);
	--ks-shadow:      0 4px 24px rgba(0,0,0,0.13);
	--ks-shadow-lg:   0 8px 40px rgba(0,0,0,0.18);
	--ks-shadow-red:  0 4px 24px rgba(204,0,0,0.35);

	--ks-transition:  all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	--ks-transition-fast: all 0.15s ease;

	--ks-container:   1400px;
	--ks-gutter:      24px;
}

/* ================================================================
   GLOBAL RESETS — override Bootstrap 3 base styles
   ================================================================ */

/* Bootstrap sets html { font-size: 10px } and body { font-size: 14px }.
   Restore to browser default 16px so our rem/em values are correct. */
html {
	font-size: 17px !important;
}

body {
	font-family: var(--ks-font-body) !important;
	font-size: 1rem !important;
	line-height: 1.6 !important;
	color: var(--ks-gray-800) !important;
	background-color: var(--ks-white) !important;
}

/* Bootstrap resets anchor colour to #337ab7 — restore to inherit */
a {
	color: inherit;
}
a:hover,
a:focus {
	color: inherit;
	text-decoration: none;
}

/* ================================================================
   GENERATEPRESS FULL-WIDTH HOMEPAGE OVERRIDE
   ================================================================ */

/* Strip all padding/margin from GP's content wrappers */
body.home .site-content,
body.home .inside-site-content,
body.home .content-area,
body.home #primary,
body.home .inside-article,
body.home .entry-content,
body.home article.page {
	padding: 0 !important;
	margin: 0 !important;
	max-width: none !important;
	width: 100% !important;
}

/* Break #ta-homepage out of any GP container constraint
   using the 100vw full-bleed technique */
#ta-homepage {
	width: 100vw !important;
	max-width: 100vw !important;
	position: relative !important;
	left: 50% !important;
	transform: translateX(-50%) !important;
	overflow-x: hidden;
	box-sizing: border-box;
}

/* Prevent Bootstrap 3 row negative margins from causing horizontal scroll */
#ta-homepage .row {
	margin-left: 0;
	margin-right: 0;
}

/* Our own container handles centering inside each section */
#ta-homepage .ta-container {
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Hide GP elements not needed on homepage */
body.home .widget-area,
body.home #secondary {
	display: none !important;
}

body.home .entry-header,
body.home .page-header {
	display: none !important;
}

/* ================================================================
   TOP BAR (GeneratePress)
   ================================================================ */
.top-bar {
	background: var(--ks-dark) !important;
	color: var(--ks-gray-200) !important;
	border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

.top-bar a,
.inside-top-bar a {
	color: var(--ks-gray-200) !important;
	text-decoration: none !important;
}

.top-bar a:hover,
.inside-top-bar a:hover {
	color: var(--ks-white) !important;
}

.inside-top-bar {
	font-size: 0.85rem;
	padding-top: 8px !important;
	padding-bottom: 8px !important;
}

/* ================================================================
   PRE-FOOTER TRUST BAR (GeneratePress Hook Element) — hidden
   ================================================================ */
.pre-footer {
	display: none !important;
	background: var(--ks-white);
	border-top: 1px solid var(--ks-gray-100);
	border-bottom: 1px solid var(--ks-gray-100);
	padding: 40px 0;
}

.pre-footer .row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
	max-width: var(--ks-container);
	margin: 0 auto;
	padding: 0 var(--ks-gutter);
}

.pre-footer .col {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 12px;
}

.pre-footer .col i.fa {
	font-size: 2rem;
	color: var(--ks-red);
	background: rgba(204, 0, 0, 0.07);
	width: 64px;
	height: 64px;
	border-radius: var(--ks-radius);
	display: flex;
	align-items: center;
	justify-content: center;
}

.pre-footer .col h5 {
	margin: 0;
	padding: 0;
	border: none;
	font-family: var(--ks-font-body);
}

/* Outer h5 (holds icon) — hide default heading styles */
.pre-footer .col > h5 {
	display: contents;
}

/* Inner h5 (holds title + span) */
.pre-footer .col h5 h5 {
	font-size: 1rem;
	font-weight: 700;
	color: var(--ks-dark);
	line-height: 1.3;
}

.pre-footer .col h5 h5 span {
	display: block;
	font-size: 0.82rem;
	font-weight: 400;
	color: var(--ks-gray-600);
	margin-top: 4px;
	line-height: 1.5;
}

@media (max-width: 768px) {
	.pre-footer .row {
		grid-template-columns: repeat(2, 1fr);
		gap: 24px;
	}
}

@media (max-width: 480px) {
	.pre-footer .row {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}