/* Shared catalog layout; scoped to keep embedded and legacy layouts isolated. */
.cgm-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
    gap: 24px 16px;
}
.cgm-catalog .gridCell.cgm-product-card {
    float: none;
    width: auto;
    height: auto;
    min-height: 0;
    overflow: visible;
    padding-bottom: 12px;
}
.cgm-catalog .realviewImage {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: contain;
    background: var(--cgm-card-background, #fff);
}
.cgm-catalog .productTitleH2 {
    font-size: 1.15em;
    margin: 8px 0;
}
.cgm-catalog .productTitle,
.cgm-catalog .productTitle:hover {
    color: #443e39;
    display: inline;
    width: auto;
}
.cgm-catalog .gridCellInfo p {
    margin: 8px 0;
}
.cgm-pagination {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 16px 0;
    clear: both;
}
.cgm-pagination a,
.cgm-pagination a:hover {
    color: #365b79;
    background: #f4f4f4;
    padding: 8px 12px;
}
@media (max-width: 480px) {
    .cgm-product-grid { grid-template-columns: minmax(0, 1fr); }
    .introtext { padding: 15px; }
}
body {
	font-family: Arial, sans-serif;
}
a {
	color: black;
}
.small {
	font-size: small;
}
/* This is the H1 title used in the sample PHP files */
.sampleTitle {
	text-align: center;
}
.title {
	text-align: left;
	color: #B0A295;
	padding: 15px;
}
.subheading {
	font-size: 2.6em;
	color: #5D5C61;
	font-family: Helvetica, sans-serif;
	text-align: left;
	color: #5D5C61;
	padding: 15px;
}
.Store {
	text-align: center;
	background-color: #39F;
}
/* This is the intro text container */
.introheader {
	text-align: left;
	margin-left: auto;
	margin-right: auto;
}
.introtext {
	text-align: left;
	margin-right: auto;
	padding: 15px 40px;
       max-width: 800px;
	background: #F4F4F4;
	clear:both;
}
.introtext p {
	margin: .6em 0;
}
.pagetext {
	text-align: left;
	margin-right: auto;
	padding: 15px 40px;
	background: #F4F4F4;
	clear:both;
}
.pagetext p {
	margin: .6em 0;
}
.storeblock, .headerblock  {
	text-align: left;
	margin-left: auto;
	margin-right: auto;
	padding: 15px;
	clear:both;
}
/* This is the create your own text container */
.createown, .makeown {
	text-align: left;
	margin: 0 auto;
	padding: 10px;
	clear:both;
}
.createown .gridCell, .makeown .gridCell {
	height: auto;
	float: left;
	text-align: center;
	position: relative;
	overflow: hidden;
}
.createown .gridCell .realviewLink, .makeown .gridCell .realviewLink {
	border: 1px solid #0a0a0a;
	display: block;
	padding: 0px;
}
.createown .gridCell .realviewImage, .makeown .gridCell .realviewImage {
	border: 2px;
}
.createown .gridCell .realviewLink:hover .realviewImage, .makeown .gridCell .realviewLink:hover .realviewImage {
	border: 2px solid #595959!important;
}
.createown .gridCell .realviewLink:hover, .makeown .gridCell .realviewLink:hover {
	border: 1px solid #595959!important;
}
.createown p {
	text-align: left;
	margin: 20px 0 10px;
	color: #fff;
	font-size: 1.4em;
	padding: 0px;
}
.makeown p {
	color: #5D5C61;
	margin: 0 6px 10px;
}
/* This is the intro page stores container */
.Stores {
	text-align: center;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}
.Store-Item {
	float: left;
	border: 1px solid #CCCCCC;
	display: block;
	padding: 10px;
	margin: 14px;
}
/* Style for each row of products in the grid */
.gridRow {
}
/* This is one product grid cell (the box that contains each product image and text) */
.gridCell {
	height: 450px;
	float: left;
	text-align: center;
	position: relative;
	overflow: hidden;
}
/* This is the style given to the product image link by default */
.gridCell .realviewLink {
	border: 1px solid #fff;
	display: block;
	padding: 0px;
}
/* This is the style given to the product image itself by default */
.gridCell .realviewImage {
	border: 2px;
}
/* This is the style given to the inside of the image link when hovering over the image */
.gridCell .realviewLink:hover .realviewImage {
	border: 2px solid #fff!important;
}
/* This is the style given to the outside of the image link when hovering over the image */
.gridCell .realviewLink:hover {
	border: 1px solid #fff!important;
}
/* This is the style given to the text underneath the image (title, description, price...) */
.gridCellInfo {
	text-align: center;
	font-size: .7em;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
/* Centers text under the product  */
.gridCellInfo a, .gridCellInfo a span {
	text-align: center;
}
/* This is the main container for the grid of products */
.allGrids {
	text-align: left;
	width: 100%;
}
/* Centers the grid of products inside allGrids */
.centerGrids {
	margin-left: auto;
	margin-right: auto;
}
.error {
	border: 1px solid;
	padding: 18px;
	margin-bottom: 15px;
}
/* The currently selected sort method */
.selectedSort, .selectedSort a {
	text-decoration: none;
}
/* The pagination links */
.count {
	float: right;
	margin-left: -2px;
	margin-bottom: 7px;
	text-align: right;
	position: relative;
	font-size: 1.2em;
}
/* Powered by Zazzle logo */
.pbimg {
clear:both;
float:left;
}
.pbimg img {
	border: 0px;
}
/* Empty classes in case you want to change the look of the pagination and sort */
.count a, .sortLinks a {
	color: #557A95;
}
.sortLinks {
}
/* Used to stop product grids from floating to the left (at the end of the grid) */
.clearMe {
	clear: both;
	margin: 0px;
	padding: 0px;
}
/* Height of clearMe DIV */
.short {
	height: 10px;
}
/* Fix for Mozilla browsers for floating elements...best not touch this! */
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix {
	display: inline-block;
}

.current {
	background: #938E94;
	color: #fff;
	float: left;
	line-height: 50px;
	text-align: center;
	width: 50px;
	margin: 2px;
}
.lehenumbrid {
	font-size: 1.2em;
	text-align: center;
	display: block;
	float: right;
}
.lehenumbrid a {
	background: #F0F0F0;
	color: #5D5C61;
	text-decoration: none;
	float: left;
	line-height: 50px;
	width: 50px;
	margin: 2px;
}
.lehenumbrid a:hover {
	background: #557A95;
	color: #FFF;
	text-decoration: none;
	margin: 2px;
}
/* The product description text */
.productDescription {
	cursor: default;
	text-decoration: none;
	position: relative;
}
/* The product title text */
.productTitle {
	display: block;
	font-weight: bold;
}
.productTitleH2 {
	color: #557A95;
	font-size: 1em;
	font-weight: bold;
}
/* Product price text */
.productPrice {
	cursor: default;
	text-decoration: none;
	font-size: 1.2em;
	font-weight: bold;
	color: #557A95;
}
/* The pagination arrows (previous/next)*/
.paginationArrows {
	text-decoration: none;
}
