@charset "utf-8";
/* CSS Document 2026*/

.header-spacing{
		margin-top: 220px;
	}	

@media (max-width: 768px) {
	.header-spacing{
		margin-top: 100px;
	}	
	#fontPicker{
		z-index: 10000 !important;
	}
}

.cursor-pointer { cursor: pointer !important; }
.cursor-not-allowed { cursor: not-allowed !important; }
.cursor-move { cursor: move !important; }
.cursor-wait { cursor: wait !important; }

.fauxSelect{
	background-color:#FFF;
	border:#333; 
	border:medium;
	z-index:10000; 
	position:absolute; 
	width:93%; 
	max-height:400px; 
	overflow-y:scroll;
	overflow-x:hidden;
	transition: opacity 0.2s ease-in-out; 	
}


/* shopping cart icon with bubble */
.cart-icon-wrapper {
    position: relative;
    display: inline-block;
    margin-left: 8px;
    vertical-align: middle;
}

/* 2. The Icon Size */
.cart-icon-wrapper .fa-shopping-cart {
    font-size: 26px;
    color: #000;
}

/* 3. The Red Badge */
.cart-icon-wrapper:after {
    /* Pull number from the wrapper's 'value' attribute */
    content: attr(value);
    
    /* Force standard text font so the number actually appears */
    font-family: Arial, sans-serif !important;
    
    position: absolute;
    top: -12px;
    right: -12px;
    background: #ff0000;
    color: #ffffff;
    font-size: 14px;
    font-weight: bold;
    width: 22px;
    height: 22px;
    line-height: 22px; /* Centers number vertically */
    text-align: center;
    border-radius: 50%;
    border: 1px solid #000;
    z-index: 2;
}
/* end cart icon css */


.step-one-banner {
    /* Layout Fixes for Mobile */
    display: block !important;
    clear: both !important;
    width: auto !important;
    
    /* Colors & Borders */
    background-color: #fffde0 !important;
    border: 1px solid #e6db55 !important;
    
    /* Spacing & Text */
    padding: 12px 10px;
    margin: 10px 0;
    border-radius: 4px;
    font-family: Arial, sans-serif;
    font-size: 18px;
    color: #333;
    text-align: left; /* Overrides the text-center parent */
    line-height: 1.5;
	
	/* ADD THESE 3 LINES TO FIX MOBILE */
    min-height: 20px;            /* Forces the box to have volume */
    overflow: visible !important; /* Prevents parent containers from clipping it */
    -webkit-print-color-adjust: exact; /* Fixes some older mobile browser rendering bugs */
}

/* Updated to use your existing class name */
.static-pointer {
    color: #cc0000 !important;             /* Standard Red */
    -webkit-text-fill-color: #cc0000 !important; /* Forces color on mobile Safari/Chrome */
    font-weight: bold !important;
    display: inline-block !important;
}

/* The Arrow attached to your existing class */
.static-pointer:after {
	border-left-color: #cc0000 !important;
	content: "";
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 8px solid #c00; /* Red Arrow */
    margin-left: 8px;
    margin-right: 5px;
    vertical-align: middle;
}
/* Mobile Styles */
@media screen and (max-width: 768px) {
    .step-one-banner {
        font-size: 13px !important; /* Larger font is often easier to read on mobile */
    }
    
    .static-pointer {
        font-size: 13px !important;
    }
}

/* Begin Bronze feature text */
/* Container styling for a prestigious, centered look */
    /* Responsive Container */
/* Container styling for a prestigious, centered look */
    /* Responsive Container */
    .bronze-feature {
        width: 95%;
        max-width: 1200px;
        margin: 20px auto;
        /* Adjusts padding based on screen size */
        padding: clamp(20px, 5vw, 60px); 
        background: #ffffff; 
        color: #1a1512; 
        font-family: 'Garamond', Roboto, sans-serif;
        line-height: 1.6;
        border-top: 12px solid #4a3728;
        box-sizing: border-box;
    }

    /* Font sizes that "Clamp" between a minimum and maximum size */
    .bronze-feature h1 {
        /* Minimum 2rem, scales with width, Maximum 4rem */
        font-size: clamp(2rem, 8vw, 4rem); 
        font-weight: 800;
        line-height: 1.1;
        margin-bottom: 0.5em;
        color: #4a3728;
        text-transform: uppercase;
    }

    .bronze-feature p {
        font-size: clamp(1.8rem, 4.5vw, 2rem);
        margin-bottom: 1.5rem;
    }

    .bronze-feature h2 {
        font-size: clamp(1.4rem, 6vw, 3rem);
        margin-top: 2rem;
        color: #8c6d4f;
        border-bottom: 2px solid #eee;
        padding-bottom: 10px;
    }

    .bronze-feature ul {
        padding-left: 1.4rem;
    }

    .bronze-feature li {
        font-size: clamp(1.6rem, 4vw, 2rem);
        margin-bottom: 12px;
    }
	

    /* Mobile specific adjustments */
    @media (max-width: 600px) {
        .bronze-feature {
            margin: 10px auto;
            border-top-width: 8px; /* Slightly thinner bar on mobile */
        }
    }
/* end feature text */

/* styles to control custom fonts on order pages replaces select2 */
	#fontlist1 {
		border: 1px solid #999999;
		border-radius: 4px; /* Matches BS3 style */
		box-shadow: 0 6px 12px rgba(0,0,0,0.175); /* Standard Bootstrap dropdown shadow */
		background-color: #ffffff;
		position: absolute;
		z-index: 1000;
		overflow-y: auto;
		max-height: 400px;
	}

	#fontlist1 .font-row:hover {
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
		font-size: 20px !important;
		background-color: #f0f0f0 !important;
		color: #000000 !important;
		font-weight: bold !important;
	}

	#fontlist1 .font-row {
		-webkit-user-select: none;  /* Safari/Chrome */
		-ms-user-select: none;      /* IE/Edge */
		user-select: none;          /* Standard */
		-webkit-touch-callout: none; /* Disable iOS long-press menu */
		touch-action: pan-y;        /* Allow scrolling, but no "gestures" */
	}

	#fontlist1 .standard-font {
		display: block;
		width: 250px;           /* Adjust this width to match your dropdown */
		height: 30px;          /* Keep all rows uniform */
		line-height: 30px;
		white-space: nowrap;   /* Forces text onto one line */
		overflow: hidden;      /* Chops off long names */
		text-overflow: ellipsis; /* Adds "..." automatically in most browsers */
	}
	
/* end select2 replacement code */


/* replacement for swiper gallery */

.gallery-container .row {
    display: flex;
    flex-wrap: wrap; /* Allows stacking on mobile if needed */
    align-items: stretch; /* Forces columns to equal height */
}


/* 1. Make the main display responsive on Desktop too */
.main-display {
    width: 100% !important; /* Vital: Allows shrinking at tight widths like 1240px */
    max-width: 480px;      /* Keeps original size on large screens */
    height: auto;
    aspect-ratio: 4 / 3;    /* Maintains the 480x360 proportion automatically */
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
}

/* 2. Fix the images inside to match the new fluid width */
.main-display img {
    width: 100% !important; 
    height: 100% !important;
    flex-shrink: 0;
    scroll-snap-align: start;
    object-fit: cover;
}

/* 3. Make the thumb strip fluid as well */
.thumb-strip {
    width: 100% !important;
    max-width: 480px;
    display: flex;
    gap: 5px;
    margin-top: 10px;
    overflow-x: auto;
}

.thumb-strip img {
    width: 96px; /* These can stay fixed or use 20% to be fluid */
    height: 72px;
    object-fit: cover;
}

.thumb-strip img:hover {
    opacity: 1;
}

/* Hide scrollbar for main display */
.main-display::-webkit-scrollbar { display: none; }

@media (max-width: 991px) {
    /* 1. Scale the main display to the phone's width */
    .main-display {
        width: 100% !important; 
        height: auto !important;
        aspect-ratio: 4 / 3; /* Automatically maintains the 480x360 shape */
    }

    .main-display img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain; /* Ensures the whole image is visible */
    }

    /* 2. Scale the thumbnail strip to match */
    .thumb-strip {
        width: 100% !important;
        padding: 5px 0;
    }

    .thumb-strip img {
        width: 22% !important; /* Fits 4 thumbnails across nicely */
        height: auto !important;
        aspect-ratio: 4 / 3;
    }
}

/* end replacement for swiper gallery */

/* popout sidebar for order pages */

/* Sidebar Container */
.sidebar {
  height: calc(100% - 180px); /* 180px is your mobile header height */
  width: 0;                   /* Controlled by JS */
  position: fixed;
  z-index: 1050;              /* Above everything else */
  top: 180px;
  left: 0;
  background-color: #fff;
  border-right: 1px solid #000;
  transition: 0.5s;
  display: flex;              /* Magic starts here */
  flex-direction: column;     /* Stack header and body vertically */
  overflow: hidden;           /* Prevent the container itself from scrolling */
}

/* Fixed Header for the Close Button */
.sidebar-header {
  flex-shrink: 0;             /* Don't let this area shrink */
  padding: 15px;
  text-align: right;
  border-bottom: 1px solid #eee;
}

.sidebar .closebtn {
  font-size: 28px;
  color: #d9534f;             /* Red color for visibility */
  text-decoration: none;
  font-weight: bold;
}

/* The Scrollable Body */
.sidebar-body {
  flex-grow: 1;               /* Take up all remaining vertical space */
  overflow-y: auto !important; /* Enable the scrollbar HERE */
  -webkit-overflow-scrolling: touch; /* Smooth scroll for iOS */
  padding: 15px;
  margin: 0;
}

/* Desktop Adjustment (if your header height changes) */
@media (min-width: 1024px) {
  .sidebar {
    top: 240px; 
    height: calc(100% - 240px);
  }
}

@media (max-width: 1024px) {
  .sidebar {
    position: fixed !important;
    top: 180px !important; 
    left: 0;
    /* This is the most important line: */
    height: calc(100vh - 180px) !important; 
    
    width: 250px; /* Or whatever width you want */
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important; /* Prevents the WHOLE sidebar from moving */
    background: #fff;
    z-index: 9999;
    border: 1px solid #000;
  }

  /* This is where the scrollbar LIVES */
  #helpContent {
    flex: 1 !important;
    overflow-y: auto !important; 
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important; /* Forces scroll on iPhone */
    padding: 15px !important;
    display: block !important;
  }

  /* Keep the close button separate from the scroll area */
  .sidebar .closebtn {
    flex-shrink: 0 !important;
    display: block !important;
    padding: 10px 15px !important;
    text-align: right !important;
    border-bottom: 1px solid #eee;
  }
}

/* end popout sidebar for order pages */

/* breadcrumb used by Admin */

ul.breadcrumb {
  padding: 10px 16px;
  list-style: none;
  background-color: #fff;
}
ul.breadcrumb li {
  display: inline;
  font-size: 14px;
}
ul.breadcrumb li+li:before {
  padding: 8px;
  color: black;
  content: "/\00a0";
}
ul.breadcrumb li a {
  color: #0275d8;
  text-decoration: none;
}
ul.breadcrumb li a:hover {
  color: #01447e;
  text-decoration: underline;
}

/* end breadcrumb*/

/* updated legacy styles */
/* Standardizing Desktop readability */
@media only screen and (min-width: 1200px) {
    .container {
        padding-left: 40px !important;
        padding-right: 40px !important;
    }
}

/* Apply line-height to everything with these classes */
.s, .f, .f-red, .fB-red, .ff, .ff-red, .fff, .fB, .f-white, 
.fB-white, .fBB, .fBB-white, .fBBB, .fBBBB, .fBBB-red, .fBB-red, .f24, .f24B {
    line-height: 1.5;
}

/* Apply margin ONLY if the tag is a <p> */
p.s, p.f, p.f-red, p.fB-red, p.ff, p.ff-red, p.fff, p.fB, p.f-white, 
p.fB-white, p.fBB, p.fBB-white, p.fBBB, p.fBBBB, p.fBBB-red, p.fBB-red, p.f24, p.f24B {
    margin-bottom: 15px;
}
/* --- Base Styles (Shared by all) --- */
.s, .f, .f-red, .fB-red, .ff, .ff-red, .fff, .fB, .f-white, 
.fB-white, .fBB, .fBB-white, .fBBB, .fBBBB, .fBBB-red, .fBB-red, .f24, .f24B {
    font-family: Arial, Helvetica, sans-serif;
}

/* --- Group by Color --- */
.s, .f, .ff, .fff, .fB, .fBB, .fBBB, .fBBBB, .f24, .f24B { color: #000; }
.f-red, .fB-red, .ff-red, .fBBB-red, .fBB-red { color: #C00; }
.f-white, .fB-white, .fBB-white { color: #fff; }

/* --- Group by Weight --- */
.fB-red, .fB, .fB-white, .fBB, .fBB-white, .fBBB, .fBBBB, .fBBB-red, .fBB-red, .f24B { 
    font-weight: 700; 
}

/* --- Desktop Font Sizes (Default) --- */
.s { font-size: 9px; }
.f, .f-red, .fB-red, .fB, .f-white, .fB-white { font-size: 12px; }
.ff, .ff-red, .fBB, .fBB-white, .fBB-red { font-size: 14px; }
.fff, .fBBB { font-size: 16px; }
.fBBB-red { font-size: 18px; }
.fBBBB, .f24, .f24B { font-size: 24px; 
}

/* --- Mobile Adjustments (Screens 768px and smaller) --- */
@media only screen and (max-width: 768px) {
    /* Bump up the tiny 9px and 12px fonts for readability */
    .s { font-size: 11px; }
    .f, .f-red, .fB-red, .fB, .f-white, .fB-white { font-size: 12px; }
    
    /* Keep mid-range fonts comfortable */
    .ff, .ff-red, .fBB, .fBB-white, .fBB-red { font-size: 14px; }
    .fff, .fBBB, .fBBB-red { font-size: 17px; }

    /* Scale down the large 24px fonts so they don't overflow small screens */
    .fBBBB, .f24, .f24B { font-size: 20px; }

	/* Remove the margin-bottom from labels specifically */
	label.s, label.f, label.f-red, label.fB-red, label.ff, label.ff-red, label.fff, 
	label.fB, label.f-white, label.fB-white, label.fBB, label.fBB-white, 
	label.fBBB, label.fBBBB, label.fBBB-red, label.fBB-red, label.f24, label.f24B {
		margin-bottom: 0;
	}

	/* Add this to give lines of text more breathing room vertically */
    .s, .f, .f-red, .fB-red, .ff, .ff-red, .fff, .fB, .f-white, 
    .fB-white, .fBB, .fBB-white, .fBBB, .fBBBB, .fBBB-red, .fBB-red, .f24, .f24B {
        line-height: 1.6 !important;
    }
    /* Add this to give the text some breathing room on the sides */
	
	body {
        padding-left: 15px !important;
        padding-right: 15px !important;
        overflow-x: hidden !important;
        width: 100vw !important;
		word-wrap: break-word;
        overflow-wrap: break-word;
		}
	
	    /* 1. Reset the Bootstrap Container */
    .container {
        width: 100% !important;      /* Forces it to match the phone width */
        max-width: 100% !important;  /* Prevents it from going wider */
        padding-left: 25px !important;
        padding-right: 25px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* 2. Fix the Row "Negative Margin" issue */
    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
		
    }
    /* 2. Optional: Disable justification on mobile for better readability */
    .text-justify {
        text-align: left !important; 
    }

    /* 3. Ensure images/elements inside the text don't push the page wide */
    img, table, div {
        max-width: 100% !important;
        height: auto !important;
    }	
}
/* end updated legacy styles */



.col-xs-16,
.col-sm-16,
.col-md-16,
.col-lg-16 {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px
}

.col-xs-16 {
    width: 20%;
    float: left
}

@media (min-width:768px) {
    .col-sm-16 {
        width: 20%;
        float: left
    }
}

@media (min-width:992px) {
    .col-md-16 {
        width: 20%;
        float: left
    }
    .col-md-32 {
        width: 40%;
        float: left
    }
}

@media (min-width:1200px) {
    .col-lg-16 {
        width: 20%;
        float: left
    }
}

.col-xs-13,
.col-sm-13,
.col-md-13,
.col-lg-13 {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px
}

.col-xs-13 {
    width: 14%;
    float: left
}

@media (min-width:768px) {
    .col-sm-13 {
        width: 14%;
        float: left
    }
}

@media (min-width:992px) {
    .col-md-13 {
        width: 14%;
        float: left
    }
}

@media (min-width:1200px) {
    .col-lg-13 {
        width: 14%;
        float: left
    }
}

.col-xs-14,
.col-sm-14,
.col-md-14,
.col-lg-14 {
    position: relative;
    min-height: 1px;
    padding-right: 5px;
    padding-left: 5px
}

.col-xs-14 {
    width: 12.5%;
    float: left
}

@media (min-width:768px) {
    .col-sm-14 {
        width: 12.5%;
        float: left
    }
}

@media (min-width:992px) {
    .col-md-14 {
        width: 12.5%;
        float: left
    }
}

@media (min-width:1200px) {
    .col-lg-14 {
        width: 12.5%;
        float: left
    }
}

.col-xs-19,
.col-sm-19,
.col-md-19,
.col-lg-19 {
    position: relative;
    min-height: 1px;
    padding-right: 5px;
    padding-left: 5px
}

.col-xs-19 {
    width: 11%;
    float: left
}

@media (min-width:768px) {
    .col-sm-19 {
        width: 11%;
        float: left
    }
}

@media (min-width:992px) {
    .col-md-19 {
        width: 11%;
        float: left
    }
}

@media (min-width:1200px) {
    .col-lg-19 {
        width: 11%;
        float: left
    }
}

.col-xs-13,
.col-sm-13,
.col-md-13,
.col-lg-13 {
    position: relative;
    min-height: 1px;
    padding-right: 1px;
    padding-left: 1px
}

.col-xs-13 {
    width: 7.69%;
    float: left
}

@media (min-width:768px) {
    .col-sm-13 {
        width: 7.69%;
        float: left
    }
}

@media (min-width:992px) {
    .col-md-13 {
        width: 7.69%;
        float: left
    }
}

@media (min-width:1200px) {
    .col-lg-13 {
        width: 7.69%;
        float: left
    }
}

.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
    position: relative;
    min-height: 1px;
    padding-right: 1px;
    padding-left: 1px
}

.col-xs-15 {
    width: 6.5%;
    float: left
}

@media (min-width:768px) {
    .col-sm-15 {
        width: 6.5%;
        float: left
    }
}

@media (min-width:992px) {
    .col-md-15 {
        width: 6.5%;
        float: left
    }
}

@media (min-width:1200px) {
    .col-lg-15 {
        width: 6.5%;
        float: left
    }
}

.col-xs-18,
.col-sm-18,
.col-md-18,
.col-lg-18 {
    position: relative;
    min-height: 1px;
    padding-right: 1px;
    padding-left: 1px
}

.col-xs-18 {
    width: 5.5%;
    float: left
}

@media (min-width:768px) {
    .col-sm-18 {
        width: 5.5%;
        float: left
    }
}

@media (min-width:992px) {
    .col-md-18 {
        width: 5.5%;
        float: left
    }
}

@media (min-width:1200px) {
    .col-lg-18 {
        width: 5.5%;
        float: left
    }
}

.col-xs-6ths,
.col-sm-6ths,
.col-md-6ths,
.col-lg-6ths {
    position: relative;
    min-height: 1px;
    padding-right: 1px;
    padding-left: 1px
}

.col-xs-6ths {
    width: 16.5%;
    float: left
}

@media (min-width:768px) {
    .col-sm-6ths {
        width: 16.5%;
        float: left
    }
}

@media (min-width:992px) {
    .col-md-6ths {
        width: 16.5%;
        float: left
    }
}

@media (min-width:1200px) {
    .col-lg-6ths {
        width: 16.5%;
        float: left
    }
}

/* clean up the fonts dropdown list on cell */

/* Base style for each font row */
.font-row-item {
    padding: 10px 5px;
    border-bottom: 1px solid #eee;
    min-height: 45px; /* Ensures a good touch target */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

/* Mobile-specific: Increase spacing for fingers */
@media (max-width: 768px) {
    .font-row-item {
        padding: 18px 5px; 
        min-height: 60px;
    }
}

.font-row-item:hover {
    background-color: #f9f9f9;
    cursor: pointer;
}

.font-row-item img {
    max-height: 35px; /* Keeps images from looking too chunky */
    width: auto;
}