﻿.cattopbanner{display: flex;align-items: center;justify-content: center;min-height: 300px;padding: 34px 24px;border-radius: 14px;background-size: cover;background-position: left center;background-repeat: no-repeat;box-shadow: 0 8px 22px rgba(20, 40, 60, 0.10);text-align: center;margin: 0;position: relative;}
.cattopbanner:after{content:"";position: absolute;top: 0;left: 0;right: 0;bottom: 0;background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.24) 34%, rgba(255, 255, 255, 0.38) 50%, rgba(255, 255, 255, 0.24) 66%, rgba(255, 255, 255, 0.04) 100%);}
.cattopbannercontainer {display: block;max-width: 790px;margin: 0 auto;position: relative;z-index: 2;}
.cattopbannercontainer .ovaltxt {display: inline-flex;align-items: center;justify-content: center;width: fit-content;margin: 0 auto 12px;padding: 7px 14px;border-radius: 999px;background: #ffffff;color: #123c59;font-size: 13px;line-height: 1;font-weight: 900;letter-spacing: 0.03em;text-transform: uppercase;box-shadow: 0 5px 14px rgba(18, 60, 89, 0.10);}
.cattopbannercontainer .bannertxt {display: block;font-size: clamp(32px, 5vw, 68px);line-height: 1.03;font-weight: 900;letter-spacing: -0.03em;text-shadow: 0 2px 14px rgba(255, 255, 255, 0.85);}
.cattopbannercontainer .bannerlinks {display: flex;justify-content: center;flex-wrap: wrap;gap: 12px;margin: 24px auto 0;}
.cattopbannercontainer .bannerlinks a {display: inline-flex;align-items: center;justify-content: center;min-height: 44px;padding: 11px 24px;border-radius: 999px;font-size: 14px;font-weight: 900;text-decoration: none;box-shadow: rgba(18, 60, 89, 0.22) 0px 8px 20px;transition: transform 0.2s, box-shadow 0.2s;transform: translateY(0px);}
.cattopbannercontainer .bannerlinks a:hover {box-shadow:0 12px 26px rgba(18,60,89,0.30);transform:translateY(-3px);}

.catbestsellers{max-width: 1280px;margin: 0 auto 38px;padding: 0 16px;}
.catbestsellerscontainer{text-align: center;margin: 0 auto 22px;max-width: 720px;}
.catbestsellerscontainer .ovaltxt{display: inline-flex;align-items: center;justify-content: center;padding: 7px 14px;border-radius: 999px;background: #ffd95a;color: #123c59;font-size: 13px;font-weight: 900;text-transform: uppercase;letter-spacing: 0.03em;margin-bottom: 10px;}
.catbestsellerscontainer h2{margin: 0;color: #123c59;font-size: clamp(26px, 3vw, 38px);line-height: 1.15;font-weight: 900;}

.category-area-header{max-width: 1280px;margin: 0 auto 38px;padding: 0 16px;}
.category-area-header div{text-align:center;margin:0 auto 24px;max-width:780px;}
.category-area-header .ovaltxt{display: inline-flex;align-items: center;justify-content: center;padding: 7px 14px;border-radius: 999px;background: #ffffff;color: #123c59;font-size: 13px;font-weight: 900;text-transform: uppercase;letter-spacing: 0.03em;margin-bottom: 10px;box-shadow: 0 5px 14px rgba(18, 60, 89, 0.10);}
.category-area-header h2{margin: 0 0 10px;color: #123c59;font-size: clamp(26px, 3vw, 38px);line-height: 1.15;font-weight: 900;}
.category-area-header p{margin: 0 auto;max-width: 650px;color: #52677a;font-size: 16px;line-height: 1.55;font-weight: 500;}



.cat-by-age{max-width:1280px;margin:0 auto 42px;padding:0 16px;}
.cat-by-age .header{text-align:center;margin:0 auto 24px;max-width:780px;}
.cat-by-age .header .ovaltxt{display:inline-flex;align-items:center;justify-content:center;padding:7px 14px;border-radius:999px;background:#ffd95a;color:#123c59;font-size:13px;font-weight:900;                     text-transform:uppercase;                     letter-spacing:0.03em;margin-bottom:10px;box-shadow:0 5px 14px rgba(18,60,89,0.10);}
.cat-by-age .header h2{margin: 0 0 10px;color: #123c59;font-size: clamp(26px, 3vw, 38px);line-height: 1.15;font-weight: 900;}
.cat-by-age .header p{margin: 0 auto;max-width: 660px;color: #52677a;font-size: 16px;line-height: 1.55;font-weight: 500;}
.cat-by-age .boxes{display: flex;flex-wrap: wrap;gap: 12px;justify-content: center;box-sizing: border-box;}
.cat-by-age .boxes a{flex: 1 1 145px;min-width: 145px;max-width: 180px;min-height: 108px;display: flex;flex-direction: column;align-items: center;justify-content: center;text-align: center;padding: 16px 12px;border-radius: 12px;text-decoration: none;box-shadow: rgba(18, 60, 89, 0.09) 0px 6px 16px;border: 1px solid rgba(18, 60, 89, 0.08);transition: transform 0.2s, box-shadow 0.2s;box-sizing: border-box;transform: translateY(0px);}
.cat-by-age .boxes a:hover{box-shadow:0 10px 22px rgba(18,60,89,0.16);transform:translateY(-3px)}
.cat-by-age .boxes a .bigtxt{display: block;font-size: 26px;font-weight: 900;line-height: 1;margin-bottom: 7px;}
.cat-by-age .boxes a .smalltxt{display: block;font-size: 13px;line-height: 1.35;color: #52677a;font-weight: 700;}
.cat-by-age .boxcontainer{display: flex;flex-wrap: wrap;gap: 22px;align-items: stretch;box-sizing: border-box;}

.cat-by-age .left{flex:1 1 620px;min-height:430px;position:relative;border-radius:14px;background-size:cover;background-position:center;box-shadow:0 10px 24px rgba(20,40,60,0.12);}
.cat-by-age .left:after{content:"";position: absolute;top: 0;left: 0;right: 0;bottom: 0;background-image:linear-gradient(180deg, rgba(18,60,89,0.02) 0%, rgba(18,60,89,0.58) 100%);}
.cat-by-age .left a{position: absolute;top: 24px;left: 24px;display: inline-flex;align-items: center;gap: 8px;padding: 9px 14px 9px 9px;border-radius: 999px;background: rgb(255, 255, 255);font-size: 14px;font-weight: 900;text-decoration: none;box-shadow: rgba(18, 60, 89, 0.22) 0px 8px 22px;z-index: 3;transition: transform 0.2s, box-shadow 0.2s;color: rgb(18, 60, 89) !important;transform: translateY(0px);}
.cat-by-age .left a span{display: inline-flex;align-items: center;justify-content: center;width: 28px;height: 28px;border-radius: 50%;background: #ffd95a;color: #123c59;font-size: 18px;font-weight: 900;line-height: 1;}
.cat-by-age .left .txtbox{position: absolute;left: 26px;right: 26px;bottom: 26px;z-index: 2;color: #ffffff;max-width: 560px;}
.cat-by-age .left .txtbox span{display: inline-flex;align-items: center;justify-content: center;padding: 7px 14px;border-radius: 999px;background: #ffffff;color: #123c59;font-size: 13px;font-weight: 900;text-transform: uppercase;letter-spacing: 0.03em;margin-bottom: 12px;}
.cat-by-age .left .txtbox h2{margin: 0 0 10px;color: #ffffff;font-size: clamp(28px, 3vw, 42px);line-height: 1.08;font-weight: 900;text-shadow: 0 3px 14px rgba(0, 0, 0, 0.34);}
.cat-by-age .left .txtbox p{margin: 0;color: #ffffff;font-size: 16px;line-height: 1.55;font-weight: 600;text-shadow: 0 2px 10px rgba(0, 0, 0, 0.30);}

.cat-by-age .right{flex: 1 1 360px;display: flex;flex-direction: column;gap: 14px;}
.cat-by-age .right .box{flex: 1;min-height: 130px;border-radius: 12px;background: #f6f8fa;padding: 24px 22px;box-shadow: 0 6px 18px rgba(20, 40, 60, 0.08);border-left: 5px solid #d8dee6;}
.cat-by-age .right .box h3{margin: 0 0 8px;color: #123c59;font-size: 24px;line-height: 1.15;font-weight: 900;}
.cat-by-age .right .box p{margin: 0 0 14px;color: #52677a;font-size: 15px;line-height: 1.55;font-weight: 500;}
.cat-by-age .right .box a{display: inline-flex;align-items: center;justify-content: center;min-height: 40px;padding: 9px 17px;border-radius: 999px;background: rgb(18, 60, 89);font-size: 14px;font-weight: 900;text-decoration: none;box-shadow: rgba(18, 60, 89, 0.18) 0px 8px 20px;transition: transform 0.2s, box-shadow 0.2s;color: rgb(255, 255, 255) !important;transform: translateY(0px);}
.cat-by-age .right .box a:hover{transform:translateY(-3px);box-Shadow:0 12px 26px rgba(18,60,89,0.28);}

.cat-by-brand{max-width:1280px;margin:0 auto 42px;padding:0 16px;}
.cat-by-brand .header{text-align:center;margin:0 auto 24px;max-width:780px;}
.cat-by-brand .header .ovaltxt{display: inline-flex;align-items: center;justify-content: center;padding: 7px 14px;border-radius: 999px;background: #ffd95a;color: #123c59;font-size: 13px;font-weight: 900;text-transform: uppercase;letter-spacing: 0.03em;margin-bottom: 10px;box-shadow: 0 5px 14px rgba(18, 60, 89, 0.10);}
.cat-by-brand .header h2{margin: 0 0 10px;color: #123c59;font-size: clamp(26px, 3vw, 38px);line-height: 1.15;font-weight: 900;}
.cat-by-brand .header p{margin: 0 auto;max-width: 660px;color: #52677a;font-size: 16px;line-height: 1.55;font-weight: 500;}
.cat-by-brand .boxes{display: grid;grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));gap: 16px;}
.cat-by-brand .boxes a{position: relative;display: block;min-height: 190px;border-radius: 12px;overflow: hidden;background: #ffffff;text-decoration: none;box-shadow: 0 6px 18px rgba(20, 40, 60, 0.08);border: 1px solid rgba(18, 60, 89, 0.07);transition: transform 0.2s ease, box-shadow 0.2s ease;box-sizing: border-box;}
.cat-by-brand .boxes a:hover{transform:translateY(-3px);box-Shadow:0 11px 24px rgba(18,60,89,0.17);}
.cat-by-brand .boxes a .image{display: block;height: 132px;background-size: cover;background-position: center;}
.cat-by-brand .boxes a .txtbox{display: flex;align-items: center;justify-content: space-between;gap: 10px;padding: 14px 15px;color: #123c59;font-size: 16px;font-weight: 900;}
.cat-by-brand .boxes a .txtbox .button{display: inline-flex;align-items: center;justify-content: center;min-height: 30px;padding: 6px 11px;border-radius: 999px;background: #123c59;color: #ffffff;font-size: 12px;font-weight: 900;white-space: nowrap;}
.cat-by-brand .showallbrands{text-align:center;margin:24px auto 0;}
.cat-by-brand .showallbrands a{display: inline-flex;align-items: center;justify-content: center;min-height: 44px;padding: 11px 24px;border-radius: 999px;background: rgb(18, 60, 89);font-size: 14px;font-weight: 900;text-decoration: none;box-shadow: rgba(18, 60, 89, 0.18) 0px 8px 20px;transition: transform 0.2s, box-shadow 0.2s;color:#ffffff!important;transform: translateY(0px);}
.cat-by-brand .showallbrands a:hover{transform:translateY(-3px);box-Shadow:0 12px 26px rgba(18,60,89,0.28);}
@media (min-width: 1100px) {
	.cattopbanner{aspect-ratio: 2000 / 600;background-position: center center;}
}