/* bundle container */
#sub-bs-container {
    margin: 10px 0;
}
.sub-b-container {
    width: 100%;
    overflow: hidden;
    clear: both;
    margin: 10px 0;
    padding: 10px 10px 0 10px;

    background-color: inherit;/*todo*/
    border: 0;/*todo*/
    border-radius: 0;/*todo*/
}
/* bundle title */
.sub-b-title {
    width: 100%;
    clear: both;
    line-height: normal;

    font-size: 1.1em;
    color: inherit;
    text-decoration: underline;
	padding: 0 10px;
}
/* bundle description */
.sub-b-description {
    width: 100%;
    clear: both;
    line-height: normal;

    font-size: 0.8em;
    color: inherit;
	padding: 0 10px;
}
/* targets container */
.sub-b-targets {
    display: table;
    width: 100%;
    table-layout:fixed;
    border-collapse: separate;
    border-spacing: 5px;
}
.sub-t-count-2 .sub-t-container {
    width: 50%;
}
.sub-t-count-3 .sub-t-container{
    width: 33%;
}
.sub-t-count-4 .sub-t-container{
    width: 25%;
}
.sub-t-count-5 .sub-t-container{
    width: 20%;
}
.sub-t-count-6 .sub-t-container{
    width: 16%;
}
/* container of the specific target */
.sub-t-container {
    display: table-cell;
    height: 100%;
    box-sizing: border-box;
    padding: 10px;
    position: relative;
    text-align: center;
}
/* "+" or "=" UI element for bundle items */
.sub-t-container:before {
    opacity: 0.5;
    position: absolute;
    top: 50%;
    display: block;
    font-weight: bold;
    text-align: center;
    content: '+';
    border-radius: 50%;
    font-family: sans-serif;

    left: -22px;
    width: 38px;
    height: 38px;
    line-height: 38px;
    margin-top: -19px;
    font-size: 38px;
    background-color: lightgrey;/*todo*/
    color: white;/*todo*/
}
.sub-qty {
    position: absolute;
    top: 0;
    right: 0;
    width: 38px;
    height: 38px;
    line-height: 38px;
    font-size: 19px;
    opacity: 0.5;
    border-radius: 2px;
    font-weight: bold;
    text-align: center;
    background-color: black;
    color: white;
}
@media screen\0 {
    .sub-t-container:before {
        top: 70px;
    }
}
.sub-t-container:first-child:before {
    display: none;
}
.sub-t-container:last-child {
    vertical-align: middle;
    border-color: transparent;
    border: 0 none;
    background-color: transparent;
    text-align: left;
    padding-left: 42px;
}
.sub-t-container:last-child:before {
    content: '=';
    left: 0;
}
.sub-t-container img{
    clear: both;
    text-align: center;
    max-width: 100%;
}
.sub-t-container img + div {
    width: 100%;
}
/* target compare at price */
.sub-t-container .sub-t-cprice > span {
    text-decoration: line-through;
	white-space: nowrap;
    color: darkgray;
    font-size: 0.8em;
}
/* target discounted price */
.sub-t-container .sub-t-price > span {
    color: #f45b4f;
    font-size: 0.9em;
	white-space: nowrap;
}

.sub-t-container .sub-t-cprice,
.sub-t-container .sub-t-price {
	display: inline-block;
}

/* target title */
.sub-t-container .sub-t-title {
    display: block;

    font-size: 0.8em;/*todo*/
    color: inherit;/*todo*/
    text-decoration: underline;/*todo*/
}
/* submit button */
.sub-b-submit {
    display: inline-block;
    overflow: hidden !important;
    box-shadow: none;
    box-sizing: border-box !important;
    text-overflow: ellipsis;
    -moz-transition: none !important;
    -webkit-transition: none !important;
    -o-transition: color 0 ease-in !important;
    transition: none !important;
    border-image: none;
    padding: 4px 8px;
    margin: 0;
    white-space: nowrap;

    background-color: #f7887f;/*todo*/
    border: 1px solid #f7887f;/*todo*/
    border-radius: 2px;/*todo*/
    color: #fff;/*todo*/
}
.sub-reg-subtotal {
    text-decoration: line-through;
    font-size: 0.9em;
    margin-right: 10px;
    color: darkgrey;
}
/* many targets */
.sub-t-count-5 #sub-b-submit, .sub-t-count-6 #sub-b-submit {
    font-size: 0.8em;
    padding-left: 3px;
    padding-right: 3px;
}
/* mobile */
@media (max-width:768px) {
    .sub-b-container .sub-t-container {
        display: block;
        clear: both;
        width: 100%;
        margin: 20px 0;/*todo design*/
    }
    .sub-t-container img {
        width: 50%;
    }
    .sub-t-container:before{
        top: -10px;/*todo */
        left: 50%;/*todo*/
        margin-left: -19px;/*todo*/
    }
    div.sub-t-container:last-child {
        padding-left: 0;
        padding-right: 0;
    }
    .sub-b-container .sub-t-container:last-child:before {
    	left: 50%;
    }
    .sub-b-submit {
        width: 100%;
    }
}

/* for thin outer blocks [SUBP-37] */
@media (min-width:769px) {
	.sub-t-horizontal-view {
		max-width: 640px;
		margin: 0 auto;
	}
	.sub-t-horizontal-view .sub-t-container {
		text-align: left;
		display: block;
		clear: both;
		width: 100%;
		margin: 20px 0;
		min-height: 72px;
	}
	.sub-t-horizontal-view .sub-t-container:first-child {
		margin-top: 0;
	}
	.sub-t-horizontal-view .sub-t-container:last-child {
		padding-left: 0;
		padding-right: 0;
		padding-top: 20px;
	}
	.sub-t-horizontal-view .sub-t-container:last-child:before {
		left: 50%;
		top: 0;
	}
	.sub-t-horizontal-view .sub-t-container:before {
		top: -10px; /*todo */
		left: 50%; /*todo*/
		margin-left: -19px; /*todo*/
	}
	.sub-t-horizontal-view .sub-t-container img {
		display: block;
		max-height: 52px;
        max-width: 55px;
	}
	.sub-t-horizontal-view .sub-t-container a:first-of-type {
		position: absolute;
	}
	.sub-t-horizontal-view .sub-t-container > *:not(:first-child) {
		margin-left: 60px;
	}
	.sub-t-horizontal-view .sub-t-container .sub-price {
		margin-top: -6px;
	}
	.sub-t-horizontal-view .sub-t-container .sub-t-title {
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}
	.sub-t-horizontal-view .sub-t-container select {
		margin-top: 10px;
		margin-bottom: 0;
		padding: 2px 23px 4px 8px;
		font-size: 14px;
		background-size: 8px;
		width: auto;
		max-width: calc(100% - 60px);
	}
	.sub-t-horizontal-view .sub-b-submit {
		width: 100%;
	}
}

@media (min-width: 769px) and (max-width:1200px) {
    .sub-b-container .sub-b-submit {
        font-size: 0.8em;
        padding: 4px 4px;
    }
}
/* quick view */
.sca-fancybox-inner .sub-t-count-5 .sub-t-container, .sca-fancybox-inner .sub-t-count-6 .sub-t-container, .sca-fancybox-inner .sub-t-count-4 .sub-t-container,
.quick-shop-modal .sub-t-count-5 .sub-t-container, .quick-shop-modal .sub-t-count-6 .sub-t-container, .quick-shop-modal .sub-t-count-4 .sub-t-container
{
    display: block;
    clear: both;
    width: 100%;
    margin: 20px 0;/*todo*/
}
.sca-fancybox-inner .sub-t-count-5 img, .sca-fancybox-inner .sub-t-count-6 img, .sca-fancybox-inner .sub-t-count-4 img,
.quick-shop-modal .sub-t-count-5 img, .quick-shop-modal .sub-t-count-6 img, .quick-shop-modal .sub-t-count-4 img
{
    width: 50%;
}
.sca-fancybox-inner .sub-t-count-5 .sub-t-container:before, .sca-fancybox-inner .sub-t-count-6 .sub-t-container:before, .sca-fancybox-inner .sub-t-count-4 .sub-t-container:before,
.quick-shop-modal .sub-t-count-5 .sub-t-container:before, .quick-shop-modal .sub-t-count-6 .sub-t-container:before, .quick-shop-modal .sub-t-count-4 .sub-t-container:before
{
    top: -10px;/*todo*/
    left: 50%;/*todo*/
    margin-left: -19px;/*todo*/
}
.sca-fancybox-inner .sub-t-count-5 #sub-b-submit, .sca-fancybox-inner .sub-t-count-6 #sub-b-submit, .sca-fancybox-inner .sub-t-count-4 #sub-b-submit,
.quick-shop-modal .sub-t-count-5 #sub-b-submit, .quick-shop-modal .sub-t-count-6 #sub-b-submit, .quick-shop-modal .sub-t-count-4 #sub-b-submit
{
    width: 80%;
}