@charset "utf-8";

*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Main store content container */
.wraptout {
	margin: 20px auto; 
	width: 1124px; 
}
.wrapgauche {
	float: left;
    margin: 0;
    padding: 0;
	width:732px; 
}

.noircitywarecontent {
  color: #CCC;
  background-color: #000;
  padding: 0;
  margin-top: 8px;
  margin-right: 34px;
  margin-left: 37px;
}

/* Store item name (Used by Annual, Programs, and Posters) */
.itemname {
  color: red;
  font-size: 18px;
  line-height: 23px;
  font-family: Oswald, sans-serif !important;
  padding-top: 2px;
  padding-bottom: 2px;
  font-style: normal;
  font-weight: 400;
  margin: 0;
}

/* Store item description */
.itemdescription {
  font-family: Oswald, sans-serif !important;
  color: #FFF;
  padding-top: 0;
  padding-bottom: 8px;
  margin-bottom: 6px;
  font-size: 13px;
  line-height: 20px;
  font-style: normal;
  font-weight: 400;
  margin: 0;
}

/* Price styles (Used globally in the store) */
.pricegris {
  color: #CCC;
  padding-top: 2px;
  padding-bottom: 2px;
  font-size: 18px;
  line-height: 23px;
  font-family: Oswald, sans-serif;
  font-style: normal;
  font-weight: 400;
}

/* --- NEW CSS GRID LAYOUT FOR POSTERS --- */
/* (Replaces the deleted .itemfloat and .floatcol2 rules) */
.poster-grid {
    display: grid;
    grid-template-columns: 277px 301px; 
    column-gap: 80px;                   
    row-gap: 36px;                      
    margin-top: 20px;
}

.poster-item {
    width: 100%;
}
/* --------------------------------------- */

/* Image container used by Annual and Programs */
.gauchebas {
  float: left;
  margin: 0;
  padding: 0 20px 0 0;
}

/* Divider line used between Programs */
.clear-line-bdr {
  margin: 0;
  padding-top: 8px;
  padding-bottom: 8px;
  clear: both;
  border-style: none none dotted;
  border-bottom-width: 1px;
  border-bottom-color: #3B3B3B;
  color: #333;
}

/* Spacing utilities */
.padtop12 {
  margin: 0;
  padding: 12px 0 0;
}

.padbottom12 {
  padding: 0 0 4px;
}

/* --- PURCHASE BUTTONS --- */

/* Standard Purchase Button (Black & White) */
.purchase-btn {
    background-color: #000;       /* Black background */
    color: #FFF;                  /* White text */
    border: 1px solid #FFF;       /* White border */
    font-family: 'Oswald', sans-serif;
    font-size: 14px;
    font-weight: 400;
    border-radius: 4px;
    padding: 5px 13px 4px;        /* Slightly adjusted to account for the 1px border */
    cursor: pointer;
    text-transform: uppercase;
    margin-top: 8px;              
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
}

.purchase-btn:hover {
    background-color: #E9BF5C;    /* Noir City Gold */
    color: #000;                  /* Black text on hover */
    border-color: #E9BF5C;        /* Blend the border into the gold background */
}

.purchase-btn:active, .cart-btn:active {
    transform: scale(0.96);       /* Click indent effect */
}

/* Prominent View Cart Button (Red) */
.cart-btn {
    background-color: #C00;       /* Noir City Red */
    color: #FFF;
    border: 1px solid #C00;       /* Red border keeps sizing identical to the black buttons */
    font-family: 'Oswald', sans-serif;
    font-size: 16px;              /* Slightly larger text for emphasis */
    font-weight: 400;
    border-radius: 4px;
    padding: 6px 16px 5px;
    cursor: pointer;
    text-transform: uppercase;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
}

.cart-btn:hover {
    background-color: #E9BF5C;    /* Noir City Gold */
    color: #000;
    border-color: #E9BF5C;
}