/*
Theme Name:   Swahili GP Child
Theme URI:    https://tumainicenter.africa
Description:  Swahili Wear GeneratePress child theme
Author:       CodeNecta
Author URI:   https://tumainicenter.africa/codenecta
Template:     generatepress
Version:      0.1
*/

:root {
	--sw-primary: #b65a00;     /* Earthy Orange */
	--sw-accent: #792d00;      /* Deep Brown */
	--sw-highlight: #da2020;   /* Red Center */
	--sw-bg: #fbe9d5;          /* Beige Base */
	--sw-dark: #1b0c03;        /* Accent Shadow */
	--sw-ash-black: #1c1c1c;   /* Ash Black */
	--swahili-earth-1: #e2c290;
	--sw-header-bg: #3B2A1A;
	--sw-hero-header-bg: #3B2A1A8F;
	--sw-deep-ochre: #CC7722;
	--sw-forest-green: #228B22;
	--sw-clay-brown: #B66E41;
	--sw-burnt-sienna: #E97451;
	--sw-faded-mustard: #D4A017;
	--sw-terracotta-red: #CB6843;
	--sw-bronze: #B08D57;
	--sw-viba-orange: #FF6B1A;
		--sw-green-pricing: #958e09; /* Green Pricing*/

}

/* Full-Width Site */
#page.site.container {
	max-width: 100%;
	min-width: 100%;
	padding:0;

}

.separate-containers .site-main, .separate-containers .comments-area, .separate-containers .inside-article, .separate-containers .page-header, .separate-containers .paging-navigation {
	margin: 0 !important;
	padding:0;
}

/* PRODUCT PAGE */

.woocommerce .entry-content {
	margin-top: 0 !important;
	padding:1rem;
}

/**
.woocommerce div.product h1.product_title.entry-title {
background: url('https://swahiliwear.tumainicenter.africa/wp-content/uploads/2025/09/lines-divider-08.png');
padding-top: 10px;
padding-bottom: 10px;
background-size: auto 8px;
background-repeat: repeat-x;
}
**/

.woocommerce div.product img.wp-post-image {
	/* Set a generous padding to create space around the image
	* for the background pattern to show. */
	padding: 2rem;

	/* Use the new image as a background. */
	background-image: url('https://swahiliwear.com/wp-content/uploads/2025/09/bead-necklace-pattern-2048.png');

	/* Make the background repeat to fill the entire padded area. */
	background-repeat: repeat;

	/* Ensure the background image covers the entire box, including the padding. */
	background-origin: border-box;

	/* You can also adjust the size of the repeating pattern, for example:
	* background-size: 50px 50px; */
	background-size: 50px 50px;

	/* Remove the border properties from the previous approach. */
	border: none;
	border-image: none;
}

/*
.woocommerce div.product h1.product_title.entry-title {
border: 10px solid transparent; 
border-image: url('https://swahiliwear.tumainicenter.africa/wp-content/uploads/2025/09/lines-divider-08.png') 30 repeat;
background: none;
padding-top: 10px;
padding-bottom: 10px;
}
*/

.woocommerce div.product h1.product_title.entry-title {
	border: 10px solid transparent;
	/* 	background: #000000ad; */
	padding-top: 10px;
	padding-bottom: 10px;
	color: #fff;
	border-image-source: url('https://swahiliwear.com/wp-content/uploads/2025/09/lines-divider-08.png');
	border-image-slice: 80;
	border-image-repeat: repeat;
	background-color: #4B4E53;

	/* 	TV Star. Tx #eggrads */
	background-image: linear-gradient(147deg, #4B4E53 0%, #000000 74%);
}

/* Site Header */

#masthead {
	background-color: var(--sw-ash-black) ;
}

.inside-header {
	display: flex;
	align-items: center;
	padding: 5px 10px;
}

.site-header {
	position: sticky;
	top: 0;
	z-index: 1000;
}

nav#site-navigation {
	background: unset;
}

nav#site-navigation a{
	color: var(--sw-bg) ;
}

.main-title a {
	color: var(--sw-bg);
	font-family: 'Zanzabar', cursive;
	font-size: 2rem;
}


.main-title a:hover {
	color: var(--sw-bg);
}

.site-description {
	color: var(--sw-bg);

}

ul.sub-menu li.menu-item {
	background-color: var(--sw-ash-black);
}

/* Fonts */
body {
	font-family: 'Andika', sans-serif;
}

.site-branding {
	font-family: 'Zanzabar', cursive;
	font-size: 2rem;
}

.hero-title {
	font-family: 'AfricaNeue', sans-serif;
}

h1 {
	font-family: 'Tribeca', sans-serif;
	font-weight:600;

	text-align: center;
	font-size: 2.5rem;
}

blockquote {
	font-family: 'WichyLover', cursive;
}


.site-content {
	display: block;
}

/* Buttons */
.primary-cta {
	display:inline-block;
	padding:0.75rem 1.5rem;
	border-radius:9999px;
	background:#FFD15C; /* shared gold accent */
	color:#000; font-weight:bold; text-decoration:none;
	transition: all 0.3s ease;
}
.primary-cta:hover {box-shadow:0 0 15px #FFD15C;}

/* Products Lists */
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
	display: flex;
	flex-flow: column wrap;
	border-radius: 5px;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
	font-family: Tribeca;
}


/*
* ===========================================
* New Styles for Product Page Elements
* ===========================================
*/
body.woocommerce {

	/* 1. Product Price */
	/* This is a key element, so it should be visible and stand out.
	* I'm suggesting a larger, bolder font from your 'Keania One' portfolio,
	* with a color that pops but still feels earthy. */
	.woocommerce-Price-amount {
		font-family: 'KeaniaOne', sans-serif;
		font-size: 1.8rem;
		font-weight: 700;
		color: var(--sw-green-pricing); /* A rich green color for an elegant feel */
		margin-bottom: 15px;
				margin-top: 1rem;

	}
	
	 .summary.entry-summary div.product span.price {
	padding-top: 1rem;
}

	/* 2. Short Product Description */
	/* Andika is a great choice for main content because it's clean and legible. */
	.woocommerce-product-details__short-description {
		font-family: 'Andika', sans-serif;
		font-size: 1rem;
		line-height: 1.6;
		color: #333; /* A soft black for readability */
		margin-bottom: 25px;
		font-weight: 600; /* You can make this bold if you want, but I'd suggest a bold heading instead. */
	}

	/* 3. Add to Cart Button */
	/* This is a primary call to action, so it should be prominent.
	* I've used a deep purple with a hover effect to give it a nice bounce. */
	.woocommerce .button,
	.woocommerce #respond input#submit.alt,
	.woocommerce a.button.alt,
	.woocommerce button.button.alt {
		font-family: 'KeaniaOne', sans-serif;
		font-size: 1rem;
		padding: 12px 25px;
		background-color: #5D3FD3; /* A deep, rich purple */
		color: #fff;
		border: none;
		border-radius: 5px;
		transition: background-color 0.3s ease;
		cursor: pointer;
		text-transform: uppercase;
	}

	.woocommerce .button:hover,
	.woocommerce #respond input#submit.alt:hover,
	.woocommerce a.button.alt:hover,
	.woocommerce button.button.alt:hover {
		background-color: #4A32A1;
	}

	/* 4. Quantity Selectors */
	/* The quantity input should be clean and easy to read.
	* I've used Andika here for a consistent, legible look. */
	.woocommerce .quantity .qty {
		font-family: 'Andika', sans-serif;
		border: 1px solid #ccc;
		padding: 8px;
		border-radius: 5px;
		text-align: center;
		width: 60px;
	}

	/* 5. Product Detail Titles (e.g., 'Description', 'Reviews') */
	/* Use a font that feels both bold and clean. Africa Neue is a great fit here. */
	.woocommerce-tabs .wc-tabs li a {
		font-family: 'Tribeca', sans-serif;
		text-transform: uppercase;
		font-size: 1rem;
		font-weight: 600;
		color: #434343; /* Matches the dark color from your title gradient */
	}
}

/* PRODUCT GRIDS */
.woocommerce .products ul, .woocommerce ul.products {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
}

.woocommerce div.product #tab-description, .woocommerce div.product #reviews {
	padding: 1rem;
}

.related.products {
	padding: 1rem;
}

@media (max-width:768px) {
	.woocommerce .products ul, .woocommerce ul.products {
		display: flex;
		flex-flow: column wrap;
		justify-content: space-between;
	}

	.woocommerce div.product .product_title.entry-title {
		font-size: 1.5rem;
		font-weight: 700;
		margin-bottom: 1rem;
	}

	.woocommerce .woocommerce-breadcrumb {
		display: none;
	}


	.woocommerce .entry-content {
		margin-top: 0 !important;
		padding:0;
	}
	.woocommerce .summary.entry-summary {
		margin: 0;
		padding: 0 1rem;
	}

}

@media (max-width:768px) {
	
.woocommerce .entry-content {
	margin-top: 0 !important;
	padding:0;
}
	.woocommerce .summary.entry-summary {
	margin: 0;
	padding: 0 1rem;
}

& .woocommerce-product-details__short-description {
	font-family: 'Andika', sans-serif;
	font-size: 1rem;
	line-height: 1.6;
	color: #333;
	font-weight: 600;
}

& .woocommerce-Price-amount {
	font-family: 'KeaniaOne', sans-serif;
	font-size: 1.8rem;
	font-weight: 700;
	color: #3B2A1A;
	margin-bottom: 15px;
}

.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product p.price, .woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product span.price {
	color: #958e09;
	font-size: 1.25em;
	text-align: center;
}
	
	.woocommerce div.product form.cart {
	margin-bottom: 2em;
	display: flex;
	justify-content: center;
}
	.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button.alt{
	background-color: var(--sw-forest-green);
}
	
	.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button.alt:hover {
	background-color: var(--sw-forest-green);
}
	
	.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit.alt:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button.alt:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button.alt:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button.alt:hover {
	background-color: var(--sw-burnt-sienna);
	color: #fff;
}
	
	button.menu-toggle .gp-icon svg {
	font-size: 2rem;
	fill: #fff;
}
	
	#mobile-menu-control-wrapper {
	background: transparent;
}
	
	.woocommerce ul.products[class*="columns-"] li.product, .woocommerce-page ul.products[class*="columns-"] li.product {
	width: 300px;
}
}

.woocommerce ul.products li.product .woocommerce-loop-category__title, .woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce ul.products li.product h3 {
	padding: .5em 0;
	margin: 0;
	font-size: 1em;
	background: #000;
	color: #fff;
	text-align: center;
}

.woocommerce ul.products li.product a img {
	width: 100%;
	height: auto;
	display: block;
	margin: 0 0 1em;
	box-shadow: none;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	margin-bottom: 0;
}

.woocommerce ul.products, .woocommerce-page ul.products {
	display: flex;
	justify-content: center;
	align-items: center;
}

.woocommerce ul.products li.product .button {
	display: inline-block;
	margin-top: 1em;
	text-align: center;
}

.ft-products-grid {
	display: flex;
	justify-content: space-around;
}


.ft-products {
	margin:2rem;
}

.ft-product {
	flex-basis:23%;
}

h3.ft-product-title {
	font-family: 'Tribeca', sans-serif;
	font-size:1.2rem;
}

.ft-product-footer{
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: center;
}
.ft-products-grid-header > div {
	display: flex;
	flex-flow: column;
	align-items: center;
}

.ft-product-footer p {
	margin-bottom: 0;
	font-size: 1.2rem;
  font-weight: bold;
}

.ft-products-grid-header {
		display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
}
span.ft-notice {
	align-self: flex-end;
	text-transform: uppercase;
}
.ft-product {
	display: flex;
	flex-flow: column wrap;
}

img.ft-collection-icon {
	width: 70px;
	height: 70px;
	border-radius: 5px;
/* 	border: 1px groove gray; */
	margin: 0 5px;
}

h2.section-title {
	font-family: 'AfricaNeue', sans-serif;
  font-weight: 700;
  font-size: 2rem;
}


.section-divider-01 {
	height: 20px;
	min-height: 20px;
	background-image: url('http://swahiliwear.com/wp-content/uploads/2025/09/lines-divider-01.png');
	background-size:auto 20px;
	background-repeat: repeat-x;
}


.section-divider-02 {
	height: 20px;
	min-height: 20px;
	background-image: url('wp-content/uploads/2025/09/lines-divider-02.png');
	background-size:auto 20px;
	background-repeat: repeat-x;
}

.section-divider-03 {
	height: 20px;
	min-height: 20px;
	background-image: url('wp-content/uploads/2025/11/lines-divider-03.png');
	background-size:auto 20px;
	background-repeat: repeat-x;
}


/* LOCALHOST CHANGES Nov-19-2025 */
/* Header Background Color */
/* styles.css:111*/
header#masthead {
	background-color: var(--sw-bg);
}

/* styles.css:115*/
.inside-header {
	display: flex;
	align-items: center;
	padding: 0px 10px;
}

/*Logo Image Size*/
/* inline:2 - Customizer */

.site-header .header-image {
	width: 100px;
}

/* Main Menu Font + Color */
/* styles.css:131*/
nav#site-navigation a {
	color: var(--sw-accent);
	font-size: 1rem;
	font-weight: 600;
}