.productMainWrapper { width: 100%; display: flex; flex-direction: column; grid-gap: 15px; } .productMain { width: 100%; display: flex; flex-direction: row; grid-gap: 35px; } @media (max-width: 992px) { .productMain { flex-wrap: wrap; } } .productMainSec { flex-grow: 1; display: flex; flex-direction: column; grid-gap: 15px; } .productMainSec.productMainSecSide { min-width: 400px; max-width: 400px; } @media (max-width: 992px) { .productMainSec.productMainSecSide { min-width: unset; max-width: unset; } } .productMainSec.productMainSecBod { display: flex; flex-direction: column; grid-gap: 25px; min-width: 0%; } .productMainSecBodGallery { width: 100%; display: flex; flex-direction: column; grid-gap: 15px; } .productMainSecSideSec { display: flex; flex-direction: column; grid-gap: 10px; } .productMainSecSideSec.productMainSecSideSecAlt { padding: 15px; background: white; border-radius: 8px; box-shadow: 0 0 4px 0 rgb(0,0,0,0.1); } .productMainSecBodGalleryTop { } .productMainSecBodGalleryBot { padding: 10px; border-radius: 8px; background: white; box-shadow: 0 0 4px 0 rgb(0,0,0,0.1); display: flex; flex-direction: column; } .productMainSecBodGalleryBotList { width: 100%; display: flex; flex-direction: row; grid-gap: 10px; padding: 10px; background: rgba(0,0,0,0.15); border-radius: 4px; overflow-y: hidden; overflow-x: auto; justify-content: start; box-shadow: inset 0 0 8px 0 rgb(0,0,0,0.1); } .productMainSecBodGalleryBotListPicWrapper { min-width: 200px; max-width: 200px; } .productMainSecBodGalleryBotListPic { transition: ease 0.3s; padding-top: 56.25%; background: rgba(0,0,0,0.1); overflow: hidden; border-radius: 6px; position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; box-shadow: 0 0 4px 0 rgb(0,0,0,0.1); outline: solid 3px rgba(255,153,0,0); cursor: pointer; } .productMainSecBodGalleryBotListPic:hover { outline: solid 3px rgba(255,153,0,0.85); } .productMainSecBodGalleryBotListPicImg { position: absolute; top: 0; bottom: 0; right: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .productMainSecBodExtra { display: flex; flex-direction: column; grid-gap: 10px; } .productMainSecBodGalleryTopPic { width: 100%; padding-top: 56.25%; background: rgba(0,0,0,0.1); border-radius: 8px; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; overflow: hidden; } .productMainSecBodGalleryTopPicImg { position: absolute; top: 0; bottom: 0; right: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .productMainSecBodGalleryBotListPic.productMainSecBodGalleryBotListPicActive { outline: solid 2px rgb(255,153,0); } .productMainWrapperTop { width: 100%; display: flex; flex-direction: row; grid-gap: 10px; } .productMainWrapperTopSec { display: flex; flex-direction: row; grid-gap: 5px; } .productMainWrapperTopSec.productMainWrapperTopSecInfo { flex-direction: column; } .productMainWrapperTopSecInfoTitle { font-weight: 600; } .productMainSecBodExtraInside { width: 100%; display: flex; flex-direction: column; grid-gap: 10px; } .productMainSecBodExtraInsideDetails { display: flex; flex-direction: column; } .productMainSecBodExtraInsideActions { display: flex; flex-direction: row; justify-content: center; align-items: center; } .btnMain.productMainSecBodExtraInsideActionsBtn { width: 100%; padding: 5px 15px; font-size: 16px; background: rgba(0,0,0,0.05); color: rgba(0,0,0,0.35); } .productMainSecSideSecText { } .btnMain.productMainSecSideSecBtn { width: 100%; padding: 5px 15px; font-size: 16px; background: rgba(0,0,0,0.05); color: rgba(0,0,0,0.35); } .productMainSecSideSecActions { display: flex; flex-direction: row; grid-gap: 10px; } @media (max-width: 576px) { .productMainSecSideSecActions { flex-direction: column; } } .btnMain.productMainSecSideSecActionsBtn { padding: 10px 20px; font-size: 16px; background: rgba(0,0,0,0); color: rgba(0,0,0,0.35); border: solid 1px rgba(0,0,0,0.1); } .btnMain.productMainSecSideSecActionsBtn:hover { background: rgba(255,153,0,0.85); border: solid 1px rgba(0,0,0,0); } .btnMain.productMainSecSideSecActionsBtn.productMainSecSideSecActionsBtnBuy { width: 100%; background: rgb(255,153,0); color: white; border: solid 1px rgba(0,0,0,0); padding: 5px 5px; flex-wrap: wrap; } .btnMain.productMainSecSideSecActionsBtn.productMainSecSideSecActionsBtnBuy:hover { background: rgba(255,153,0,0.85); box-shadow: 0 0 4px 0 rgb(0,0,0,0.1); } .productMainSecSideSecPrice { width: 100%; display: flex; flex-direction: row; grid-gap: 10px; align-items: center; flex-wrap: wrap; } @media (max-width: 576px) { .productMainSecSideSecPrice { flex-direction: column; } } .productMainSecSideSecPriceBox { display: flex; flex-direction: row; grid-gap: 0px; border-radius: 6px; border: solid 1px rgba(0,0,0,0.1); overflow: hidden; font-size: 18px; flex-grow: 1; } @media (max-width: 576px) { .productMainSecSideSecPriceBox { width: 100%; } } .productMainSecSideSecPriceBoxCurrency { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 5px 15px; border-right: solid 1px rgba(0,0,0,0.1); background: rgba(255,153,0,0.85); color: white; font-weight: 600; } .productMainSecSideSecPriceBoxPrice { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 5px 15px; font-weight: 600; white-space: nowrap; } .productMainSecSideSecPriceText { } .productMainSecSideSecPriceBoxPriceText { width: 100%; } .productMainSecSideSecPriceOther { font-size: 14px; color: rgba(0,0,0,0.5); font-weight: 600; display: flex; flex-direction: row; grid-gap: 5px; flex-wrap: wrap; } .productMainSecSideSecActionsBtnBuySpan { text-align: center; flex-grow: 1; } .productMainSecSideSecActionsBtnBuySpan.productMainSecSideSecActionsBtnBuySpanAlt { font-size: 14px; padding: 5px 15px; border-radius: 4px; background: rgba(0,0,0,0.05); border: solid 1px rgba(255,255,255,0.15); flex-grow: unset; } .productMainSecSideSecTitle { font-weight: 600; color: rgba(0,0,0,0.5); font-size: 21px; } .productMainSecBodExtraTagsWrapper { display: flex; flex-direction: column; grid-gap: 10px; } .productMainSecBodExtraTags { padding: 15px; border-radius: 8px; background: white; box-shadow: 0 0 4px 0 rgb(0,0,0,0.1); display: flex; flex-direction: row; grid-gap: 10px; flex-wrap: wrap; } .productMainSecBodExtraTagsTag { transition: ease 0.3s; padding: 5px 15px; border-radius: 8px; border: solid 1px rgba(0,0,0,0.1); font-weight: 400; color: rgba(0,0,0,0.5); background: white; } .productMainSecBodExtraTagsTag:hover { color: rgb(255,255,255); background: #ffa826; }