/* Product Page CSS */

.prices-tier {
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
    margin-top: -2px;
    line-height: 18px;
    font-size: 12px;
    text-align: end;
}

.prices-tier .item {
    margin-bottom: 0;
}

@media (max-width: 479px) {
    .prices-tier {
        margin-top: 0;
        line-height: 16px;
    }
}

/* Styles for gif gallery: images in a row, title below each image, responsive layout */

.gif-gallery {
    box-sizing: border-box;
    width: 100%;
    padding: 8px 12px;
}

/* container that holds the items - use flex so items align horizontally and wrap on small screens */
.gif-gallery-items {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    justify-content: center;
    align-items: flex-start;
    margin-bottom: 1em;
}

/* each item: stack image and title vertically, center-aligned */
.gif-gallery-item {
    display: flex;
    flex-direction: column;
}

/* image wrapper for consistent sizing */
.gif-video-image {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

/* actual gif/video image */
.gif-video {
    display: block;
    max-width: 120px;      /* desktop default */
    max-height: 120px;
    width: auto;
    height: auto;
    border-radius: 4px;
}

/* title below the image */
.gif-video-title {
    margin-top: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: var(--title_font);
    font-weight: bold;
}

.thumb-gallery-image[media-type="gif"] {
    max-width: 50px;
    max-height: 50px;
    object-fit: cover;
}

.gif-gallery-mobile,
.gif-gallery-title {
    display: none;
}

.gif-gallery-modal .modal-title {
    border-bottom: none;
    padding-bottom: 0;
}

.gif-gallery-modal button.action.primary {
    width: 100%;
}

.thumb-gallery-image[media-type="gif"] {
    max-width: 50px;
    max-height: 50px;
    object-fit: cover;
}

.gif-gallery-modal .modal-inner-wrap {
    max-width: 50em;
}

.gif-thumbnail-title {
    margin: .5em 0 .7em;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 1.5em;
    font-family: var(--title_font);
    font-weight: bold;
}

/* Desktop: keep natural width but limit max */
@media (min-width: 901px) {
    .gif-gallery-item {
        flex: 0 0 auto;
    }
}

/* Tablet: 3 items per row */
@media (min-width: 601px) and (max-width: 900px) {
    .gif-gallery-item {
        flex: 0 1 calc(33.333% - 1em);
        max-width: calc(33.333% - 1em);
    }
    .gif-video { max-width: 100px; max-height: 100px; }
}

@media only screen and (max-width: 767px) {
    .gif-gallery-modal .modal-inner-wrap {
        max-height: 100vh !important;
    }
}

/* Phone: 2 items per row */
@media (max-width: 600px) {
    .gif-gallery-item {
        flex: 0 1 calc(33.333% - 1em);
        max-width: calc(33.333% - 1em);
    }
    .gif-video { max-width: 90px; max-height: 90px; }
    .thumb-gallery-image[media-type="gif"] {
        display: none;
    }
    .gif-gallery-mobile,
    .gif-gallery-title {
        display: block;
    }
}

/* Very small phones: single column */
@media (max-width: 360px) {
    .gif-gallery-item {
        flex: 0 1 100%;
        max-width: 100%;
    }
    .gif-video { max-width: 80px; max-height: 80px; }
}

#attr_otherdetails\.tab .tab-inner-content {
    line-height: 1.46;
}

/* Shipping Restrictions Map Styles */
#us-map-container {
	height: 0;
	width: 100%;
	position: relative;
	display: block;
	margin: 0 auto;
}

#us-map-container svg g.datamaps-subunits,
#us-map-container svg g.labels {
    transform: scale(1.25) translateX(0%);
    transform-origin: center;
}

.hoverinfo {
	padding: 10px;
	border-radius: 4px;
	background-color: white;
	box-shadow: 1px 1px 5px rgba(0,0,0,0.2);
	font-size: 12px;
	line-height: 1.4;
}

.legend-header {
    font-size: 18px;
    font-weight: bold;
    font-family: var(--title_font);
    display: flex;
    justify-content: center;
    margin-bottom: 1em;
}

.datamaps-legend {
    position: static !important;
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.datamaps-legend dl { margin-bottom: 0; }

.datamaps-legend dt { margin: 0 6px 0 0 !important; }

.datamaps-legend dd {
    width: 18px !important;
    margin-right: 6px !important;
}

@media (max-width: 403px) {
    .datamaps-legend dt {
        font-size: .9em !important;
    }
}
/* End Restrictions Map Styles */