{"version":3,"file":"2b2b0ab3-745442b16b6efd2cc758.js","mappings":"gaAEO,MAAMA,GAAUC,EAAAA,EAAAA,GAAA,KAAAC,OAAA,aAAAD,CAAA,CAAAE,KAAA,SAAAC,OAAA,8IAaVC,GAAUJ,EAAAA,EAAAA,GAAA,OAAAC,OAAA,aAAAD,CAAA,CAAAE,KAAA,SAAAC,OAAA,sBA+CVE,GAAkBL,EAAAA,EAAAA,GAAA,OAAAC,OAAA,aAAAD,CAAA,CAAAE,KAAA,SAAAC,OAAA,wEAwJlBG,GAAoBN,EAAAA,EAAAA,GAAA,OAAAC,OAAA,YAAAD,CAAA,2CAGhBO,IAAK,IAAAC,EAAA,OACI,QADJA,EAClBD,EAAME,wBAAgB,IAAAD,EAAAA,EAAI,oCAAoC,gCAEtDD,IAAK,IAAAG,EAAA,OAAqB,QAArBA,EAAKH,EAAMI,kBAAU,IAAAD,EAAAA,EAAI,qBAAqB,4mCA2ElDE,GAAkBZ,EAAAA,EAAAA,GAAA,OAAAC,OAAA,YAAAD,CAAA,4GAQzBM,EAAoB,4UA2BbO,GAAsBb,EAAAA,EAAAA,GAAA,OAAAC,OAAA,YAAAD,CAAA,CAAAE,KAAA,SAAAC,OAAA,6HAoBtBW,GAAmBd,EAAAA,EAAAA,GAAA,OAAAC,OAAA,YAAAD,CAAA,CAAAE,KAAA,SAAAC,OAAA,oSA4BnBY,GAAgBf,EAAAA,EAAAA,GAAA,OAAAC,OAAA,YAAAD,CAAA,CAAAE,KAAA,SAAAC,OAAA,iGAUhBa,GAAYhB,EAAAA,EAAAA,GAAA,MAAAC,OAAA,YAAAD,CAAA,CAAAE,KAAA,UAAAC,OAAA,mTAsBZc,GAAejB,EAAAA,EAAAA,GAAA,KAAAC,OAAA,YAAAD,CAAA,CAAAE,KAAA,UAAAC,OAAA,4SAkBfe,GAAYlB,EAAAA,EAAAA,GAAA,KAAAC,OAAA,YAAAD,CAAA,CAAAE,KAAA,SAAAC,OAAA,4PAmBZgB,GAAmBnB,EAAAA,EAAAA,GAAA,OAAAC,OAAA,YAAAD,CAAA,CAAAE,KAAA,UAAAC,OAAA,qO","sources":["webpack://@ecom/uk/./src/components/ProductCardItem/styles.js"],"sourcesContent":["import styled from '@emotion/styled';\n\nexport const StyledLink = styled.a`\n  text-decoration: none;\n  width: 100%;\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  height: 100%;\n  &.disabled {\n    pointer-events: none;\n    cursor: not-allowed;\n  }\n`;\n\nexport const CardHeader = styled.div`\n  position: relative;\n`;\n\nexport const Card = styled.div`\n  padding: 10px 20px;\n  text-align: center;\n  flex: 1 0 25%;\n  margin-bottom: 35px;\n  transition: all 0.3s ease 0s;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  position: relative;\n  width: 278px;\n  height: 505px;\n\n  &:hover {\n    box-shadow: 0px 0px 20px #00000029;\n    border-radius: 5px;\n  }\n\n  .shopButton {\n    width: 100%;\n    margin-top: 15px;\n    font-family: 'P22 Underground';\n    padding: 14px 0;\n  }\n\n  @media screen and (max-width: 1024px) {\n    width: 100%;\n  }\n\n  @media screen and (max-width: 500px) {\n    height: 370px;\n    padding: 10px 0;\n    margin: 0;\n    margin-bottom: 40px;\n\n    .shopButton {\n      height: 40px;\n      font-size: 14px;\n      margin-top: 10px;\n    }\n  }\n`;\n\nexport const TrustPilotFallback = styled.div`\n  display: block;\n  height: 25px;\n\n  @media (min-width: 768px) {\n    display: block;\n  }\n`;\n\nexport const Img = styled.img`\n  transition: all 0.3s ease 0s;\n  width: ${({ hover }) => (hover ? '257px' : '239px')};\n  height: ${({ hover }) => (hover ? '258px' : '240px')};\n\n  @media screen and (max-width: 500px) {\n    width: 142px;\n    height: 142px;\n  }\n`;\n\nexport const Product = styled.div`\n  display: flex;\n  min-height: 100%;\n  flex-direction: column;\n  align-items: center;\n`;\n\nexport const Title = styled.span`\n  text-align: center;\n  font: normal normal 600 22px/31px P22 Underground;\n  letter-spacing: 0px;\n  color: #213f4e;\n  opacity: 1;\n  margin-bottom: 5px;\n  line-height: 1.3rem;\n\n  @media screen and (max-width: 500px) {\n    font-size: 16px;\n    line-height: 1.3rem;\n  }\n`;\n\nexport const Subtitle = styled.span`\n  color: var(--r-33-g-63-b-78);\n  text-align: center;\n  font: normal normal normal 16px/22px P22 Underground;\n  letter-spacing: 0px;\n  color: #213f4e;\n  height: 40px;\n\n  @media screen and (max-width: 500px) {\n    font-size: 14px;\n    height: 60px;\n  }\n`;\n\nexport const AbsoluteContent = styled.div`\n  position: absolute;\n  width: 100%;\n  bottom: 20px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  left: 0;\n  padding: 0 10px;\n\n  @media screen and (max-width: 500px) {\n    bottom: 0;\n    padding: 0;\n  }\n`;\n\nexport const PriceTag = styled.span`\n  font: normal normal normal 16px/22px P22 Underground;\n  letter-spacing: 0px;\n  color: #c95f3d;\n  margin-top: 20px;\n  margin-bottom: 10px;\n\n  @media screen and (max-width: 500px) {\n    margin-top: 10px;\n    margin-bottom: 5px;\n    text-align: center;\n  }\n`;\n\nexport const BannerLeftWrapper = styled.div`\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 70px;\n  width: 70px !important;\n  background: #d26546;\n  border-radius: 100%;\n\n  @media screen and (max-width: 600px) {\n    height: 55px;\n    width: 55px !important;\n  }\n`;\nexport const BannerLeft = styled.div`\n  margin: 0;\n  position: relative;\n  top: 50%;\n  -ms-transform: translateY(-50%);\n  transform: translateY(-50%);\n\n  span {\n    font-size: 24px;\n    font-weight: 400;\n    color: #fff;\n  }\n\n  @media screen and (max-width: 600px) {\n    span {\n      font-size: 20px;\n      font-weight: 300;\n      color: #fff;\n    }\n  }\n\n  p {\n    font-size: 14px;\n    font-weight: 400;\n    color: #fff;\n    line-height: 5px;\n    margin-bottom: 2px;\n  }\n  @media screen and (max-width: 600px) {\n    p {\n      font-size: 10px;\n      font-weight: 300;\n      color: #fff;\n      line-height: 5px;\n      margin-bottom: 2px;\n    }\n  }\n`;\n\n// ProductCard\nexport const TrustPilot = styled.div`\n  display: flex;\n  gap: 0.3em;\n  margin-bottom: 10px;\n  width: 100%;\n  flex-direction: column;\n  justify-content: flex-start;\n  .trustpilot-widget .wrapper-company-stars {\n    justify-content: flex-start;\n  }\n`;\n\nexport const ProductDetailWrapper = styled.div`\n  font-size: 12px;\n  display: none;\n  background: ${(props) =>\n    props.backgroundColour ?? 'var(--color-card-background-hover)'};\n  padding: 10px 24px;\n  color: ${(props) => props.fontColour ?? 'var(--petlab-white)'};\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  border-radius: var(--petlab-border-radius);\n  transform: translateY(-101%);\n  transition: transform 0.5s ease-in-out;\n  @media (min-width: 641px) {\n    display: initial;\n  }\n\n  section {\n    display: flex;\n    margin-bottom: 34px;\n    width: min-content;\n    margin-left: auto;\n    background-color: #ffffff;\n    right: 10px;\n    padding: 0 8px 0;\n    border-radius: var(--petlab-border-radius);\n    transform: translate(10%, -5%);\n\n    span {\n      white-space: nowrap;\n      font-family: 'Neuzeit Grotesk', serif;\n      font-style: normal;\n      font-weight: bold;\n      font-size: 16px;\n      line-height: 24px;\n      text-align: center;\n      color: var(--color-secondary);\n      padding-top: 4px;\n    }\n  }\n\n  h4 {\n    font-family: 'Utopia Std', serif;\n    font-style: italic;\n    font-weight: normal;\n    font-size: 2.1em;\n    margin-bottom: 24px;\n    padding-bottom: 10px;\n    border-bottom: 1px solid #ffffff;\n    margin-top: 32px;\n  }\n\n  p {\n    font-family: 'Utopia Std', serif;\n    font-style: normal;\n    font-weight: normal;\n    font-size: 1.5em;\n    margin-bottom: 24px;\n  }\n\n  ul {\n    padding-left: 24px;\n    list-style: disc;\n    margin-bottom: auto;\n    margin-top: auto;\n\n    li {\n      list-style-image: url('/images/checklist.svg');\n      font-family: 'Neuzeit Grotesk', serif;\n      font-style: normal;\n      font-weight: normal;\n      font-size: 1.4em;\n      margin-bottom: 14px;\n    }\n  }\n`;\n// 1099\n//this has to be below the detail wrapper for inheritance\nexport const ProductCardWrapper = styled.div`\n  width: calc(33.33% - 11px);\n  position: relative;\n  overflow: hidden;\n  margin-right: 16px;\n  margin-bottom: 47px;\n\n  &:hover {\n    ${ProductDetailWrapper} {\n      transform: translateY(0);\n    }\n  }\n\n  @media screen and (min-width: 1421px) {\n    &:nth-of-type(3n) {\n      margin-right: unset;\n    }\n  }\n\n  @media screen and (max-width: 1420px) and (min-width: 769px) {\n    width: calc(33.33% - 11px);\n\n    &:nth-of-type(3n) {\n      margin-right: unset;\n    }\n  }\n\n  @media screen and (max-width: 768px) {\n    width: calc(50% - 8px);\n\n    &:nth-of-type(2n) {\n      margin-right: unset;\n    }\n  }\n`;\nexport const AbsoluteImageContainer = styled.div`\n  position: absolute;\n  width: 25%;\n  img {\n    width: 100%;\n  }\n  &.top {\n    top: 30px;\n  }\n  &.bottom {\n    bottom: 20px;\n  }\n  &.left {\n    left: 20px;\n  }\n  &.right {\n    right: 20px;\n  }\n`;\n\nexport const ProductImageWrapper = styled.div`\n  background-color: var(--color-card-background);\n  display: flex;\n  justify-content: center;\n  position: relative;\n  min-height: 200px;\n\n  .banner {\n    position: absolute;\n    z-index: 1;\n    top: 6px;\n    left: 6px;\n    width: 40px;\n    height: 40px;\n  }\n\n  @media (min-width: 641px) {\n    min-height: 400px;\n\n    .banner {\n      top: 8px;\n      left: 8px;\n      width: 70px;\n      height: 70px;\n    }\n  }\n`;\n\nexport const ProductCardImage = styled.img`\n  width: 100%;\n  height: 100%;\n  max-width: 260px;\n  object-fit: contain !important;\n  &.sold-out {\n    opacity: 0.5;\n  }\n`;\n\nexport const ProductTitle = styled.h5`\n  font-family: 'Utopia Std', serif;\n  width: 100%;\n  font-size: 18px;\n  line-height: 21px;\n\n  font-style: normal;\n  font-weight: 400;\n\n  letter-spacing: 0;\n  text-align: left;\n  color: var(--petlab-blue);\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  margin-bottom: 16px;\n  @media (min-width: 651px) {\n    font-size: 20px;\n    line-height: 33px;\n  }\n`;\n\nexport const ProductSubtitle = styled.p`\n  font-family: 'Neuzeit Grotesk';\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 18px;\n  letter-spacing: 0;\n  text-align: left;\n  color: var(--petlab-blue);\n  margin-bottom: 8px;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  min-height: 36px;\n`;\n\nexport const ProductPrice = styled.p`\n  font-family: 'Utopia Std', serif;\n  font-size: 18px;\n  line-height: 21px;\n\n  font-style: normal;\n  font-weight: 400;\n\n  letter-spacing: 0;\n  text-align: left;\n  color: var(--petlab-red);\n  margin-top: auto;\n  margin-bottom: 5px;\n  @media (min-width: 651px) {\n    font-size: 20px;\n    line-height: 24px;\n  }\n`;\n\nexport const AbsoluteCardContent = styled.div`\n  margin-top: 8px;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  left: 0;\n  padding: 0;\n\n  .trustpilot-widget {\n    max-width: 167px;\n  }\n  .product-button {\n    padding: 10px;\n    height: 46px;\n  }\n\n  @media (max-width: 370px) {\n    .product-button {\n      padding: 0;\n      font-size: 14px;\n    }\n  }\n`;\n"],"names":["StyledLink","_styled","target","name","styles","CardHeader","TrustPilotFallback","ProductDetailWrapper","props","_props$backgroundColo","backgroundColour","_props$fontColour","fontColour","ProductCardWrapper","AbsoluteImageContainer","ProductImageWrapper","ProductCardImage","ProductTitle","ProductSubtitle","ProductPrice","AbsoluteCardContent"],"sourceRoot":""}