/* ============ RESET ============ */ * { margin: 0; padding: 0; box-sizing: border-box; } :root { --amber: #f4a300; /* top bar */ --orange: #f15a24; /* CTA + display text */ --orange-deep: #ef5a1e; /* curved ribbon */ --yellow: #ffce2e; /* hero blob fill */ --ink: #2b2b2b; /* headings */ --muted: #8a8a8a; /* sub text */ --line: #ececec; } /* Visually hidden but readable by search engines and screen readers — used for headings/labels that the visual design conveys through imagery instead. */ .screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } html { font-size: 16px; background: #fff; overflow-x: hidden; } body { font-family: "Poppins", system-ui, sans-serif; color: var(--ink); background: #fff; -webkit-font-smoothing: antialiased; width: 100%; margin: 0 auto; overflow-x: hidden; } a { text-decoration: none; color: inherit; } ul { list-style: none; } /* utility: apply Lemon display font to any element */ .lemon-regular { font-family: "Lemon", "Poppins", sans-serif; font-weight: 400; font-style: normal; } /* ============ TOP BAR ============ */ .topbar { background: #f1a91e; color: #1c1c1c; font-family: "Inter", "Poppins", sans-serif; font-size: 12px; } .topbar__inner { max-width: 100%; margin: 0 auto; min-height: 40px; padding: 6px 48px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; row-gap: 4px; } .topbar__offer { display: flex; align-items: center; gap: 8px; font-family: "Inter", "Poppins", sans-serif; font-size: 12px; font-weight: 500; } .topbar__offer .fa-heart { color: #e23b3b; font-size: 13px; } .topbar__right { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; } .topbar__link { display: flex; align-items: center; gap: 7px; font-weight: 500; white-space: nowrap; } .topbar__link i { font-size: 13px; } .topbar__divider { width: 1px; height: 16px; background: rgba(0, 0, 0, 0.28); } .topbar__location { display: flex; align-items: center; gap: 8px; background: #fff; color: #1c1c1c; border: none; border-radius: 7px; padding: 8px 14px; font-family: inherit; font-size: 12px; font-weight: 500; cursor: pointer; white-space: nowrap; } .topbar__location .fa-location-dot { color: #1c1c1c; } .topbar__loc-caret { font-size: 10px; color: #555; margin-left: 2px; } .topbar__follow { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 600; } .social { width: 24px; height: 24px; border-radius: 50%; background: #fff; color: var(--amber); display: grid; place-items: center; font-size: 12px; } /* ============ NAVBAR ============ */ .navbar { background: #fff; border-bottom: 1px solid var(--line); } .navbar__inner { max-width: 100%; margin: 0 auto; height: 76px; padding: 0 48px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; } /* nav (left) */ .nav { display: flex; align-items: center; gap: 22px; } .nav__home { width: 40px; height: 40px; border-radius: 50%; background: #faf4e8; color: var(--amber); display: grid; place-items: center; font-size: 16px; } .nav__item { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 500; color: #3a3a3a; white-space: nowrap; } .nav__item i { font-size: 10px; color: #777; } /* logo (center) */ .logo { display: flex; flex-direction: column; align-items: center; line-height: 1; } .logo__img { display: block; height: 69px; width: auto; } /* right cluster */ .navbar__right { display: flex; align-items: center; justify-content: flex-end; gap: 18px; } /* * NOTE: these must stay scoped to the navbar. WordPress adds a `search` class * to on search-result pages, so a bare `.search { … }` selector would * also style the element (max-width:410px, display:flex) and break the * whole page layout. Scoping to .navbar__right keeps it on the search box only. */ .navbar__right .search { position: relative; display: flex; align-items: center; gap: 10px; background: #f4f4f4; border-radius: 10px; padding: 12px 20px; flex: 1; max-width: 410px; margin-right: 22px; } .navbar__right .search i { color: #9a9a9a; font-size: 13px; } .navbar__right .search input { border: none; background: transparent; outline: none; font-family: inherit; font-size: 14px; width: 100%; color: #555; } .navbar__right .search input::placeholder { color: #9a9a9a; } /* Live search suggestions dropdown */ .search__live { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 3500; background: #fff; border: 1px solid #eee; border-radius: 12px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14); overflow: hidden; max-height: 70vh; overflow-y: auto; } .search__live[hidden] { display: none; } .search__live-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; text-decoration: none; border-bottom: 1px solid #f2f2f2; } .search__live-item:hover { background: #fff7f2; } .search__live-item img, .search__live-noimg { flex: 0 0 46px; width: 46px; height: 46px; border-radius: 8px; object-fit: contain; background: #f6f6f6; display: flex; align-items: center; justify-content: center; color: #c9c9c9; } .search__live-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .search__live-name { font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .search__live-price { font-size: 13px; font-weight: 700; color: var(--orange); } .search__live-all { display: block; padding: 12px 14px; text-align: center; font-size: 13px; font-weight: 700; color: var(--orange); text-decoration: none; background: #fafafa; } .search__live-all:hover { background: #fff2ea; } .search__live-empty { padding: 18px 14px; text-align: center; color: #9a9a9a; font-size: 14px; } .icon-btn { font-size: 18px; color: #444; display: inline-flex; align-items: center; } .icon-btn svg { width: 24px; height: 24px; display: block; } /* ============ HERO SLIDER ============ */ .hero-slider { position: relative; max-width: 100% !important; margin: 0 auto; overflow: hidden; } .hero-slider__track { display: flex; width: 100%; transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1); will-change: transform; } /* each slide */ .hero { position: relative; flex: 0 0 100%; min-height: 450px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; overflow: hidden; } /* soft blurred room photo behind the whole hero */ .hero::before { content: ""; position: absolute; inset: -14px; background: linear-gradient(rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.78)), url("../images/hero-bg.jpg") center/cover no-repeat, #f1ece3; filter: blur(7px); z-index: 0; } /* full-bleed banner image for a slide */ .hero__banner { grid-column: 1 / -1; position: relative; z-index: 2; width: 100%; height: auto; display: block; } /* entrance animation for the active slide's text (fail-safe: visible by default) */ .slide.is-active .hero__left > * { animation: heroIn 0.6s ease backwards; } .slide.is-active .hero__left > *:nth-child(1) { animation-delay: 0.10s; } .slide.is-active .hero__left > *:nth-child(2) { animation-delay: 0.18s; } .slide.is-active .hero__left > *:nth-child(3) { animation-delay: 0.26s; } .slide.is-active .hero__left > *:nth-child(4) { animation-delay: 0.34s; } .slide.is-active .hero__left > *:nth-child(5) { animation-delay: 0.42s; } @keyframes heroIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } /* arrows */ .hero-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: none; border-radius: 50%; background: #2b2b2b; color: #fff; font-size: 16px; display: grid; place-items: center; cursor: pointer; z-index: 10; opacity: 0.9; transition: background 0.2s, opacity 0.2s, transform 0.2s; } .hero-arrow:hover { background: var(--orange); opacity: 1; } .hero-arrow:active { transform: translateY(-50%) scale(0.92); } .hero-arrow--prev { left: 14px; } .hero-arrow--next { right: 14px; } /* dots */ .hero-dots { position: absolute; left: 48px; bottom: 18px; display: flex; gap: 10px; z-index: 10; } .hero-dots button { width: 10px; height: 10px; padding: 0; border: none; border-radius: 50%; background: #e3d3a8; cursor: pointer; transition: width 0.3s, background 0.3s; } .hero-dots button.is-active { width: 26px; border-radius: 6px; background: var(--orange); } /* left text */ .hero__left { padding: 0 22px 0 48px; position: relative; z-index: 3; } .hero__title { font-size: 30px; font-weight: 700; color: var(--ink); } .hero__display { font-family: "Lemon", "Poppins", sans-serif; font-style: normal; font-weight: 800; font-size: 78px; line-height: 1; color: var(--orange); margin: 4px 0 18px; } .hero__subtitle { font-size: 16px; color: var(--muted); line-height: 1.55; margin-bottom: 26px; } .hero__cta { display: inline-block; background: var(--orange); color: #fff; font-weight: 600; font-size: 16px; padding: 15px 30px; border-radius: 10px; box-shadow: 0 10px 22px rgba(241, 90, 36, 0.28); } .hero__badges { display: flex; align-items: center; gap: 30px; margin-top: 32px; } .hero__badges li { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 500; color: #444; } .badge-ic { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; } .badge-ic--paw { background: #ffe9d6; } .badge-ic--vet { background: #dff3e3; } .badge-ic--test { background: #ffe2ec; } /* right visual */ .hero__right { position: relative; height: 100%; min-height: 470px; } /* curved background bands (SVG), bleeding off the right edge */ .hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; } .hero__bg-yellow { fill: var(--yellow); } .hero__bg-orange { stroke: var(--orange-deep); stroke-width: 26; } .hero__img { position: absolute; right: 40px; bottom: 0; height: 100%; max-height: 470px; object-fit: contain; z-index: 3; } .hero__badge-pedigree { position: absolute; top: 26px; right: 70px; z-index: 4; width: 86px; height: 86px; background: #c8102e; color: #fff; font-family: "Baloo 2", sans-serif; font-weight: 700; font-size: 17px; display: grid; place-items: center; text-align: center; border-radius: 50%; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18); /* starburst edge */ clip-path: polygon( 50% 0%, 61% 9%, 75% 5%, 79% 19%, 93% 21%, 90% 35%, 100% 45%, 91% 56%, 97% 69%, 84% 75%, 84% 89%, 70% 88%, 62% 99%, 50% 92%, 38% 99%, 30% 88%, 16% 89%, 16% 75%, 3% 69%, 9% 56%, 0% 45%, 10% 35%, 7% 21%, 21% 19%, 25% 5%, 39% 9% ); } .hero__deco-heart { position: absolute; color: #f08a3c; opacity: 0.5; z-index: 2; } .hero__deco-heart--1 { font-size: 24px; right: 230px; top: 250px; } .hero__deco-heart--2 { font-size: 16px; right: 120px; top: 120px; opacity: 0.35; } /* fallback when hero image missing */ .hero__img:not([src]), .hero__img[src=""] { display: none; } /* shared round arrow buttons */ .round-arrow { width: 34px; height: 34px; border: none; border-radius: 50%; display: grid; place-items: center; cursor: pointer; font-size: 12px; transition: background 0.2s, color 0.2s; } .round-arrow--dark { background: #2b2b2b; color: #fff; } .round-arrow--dark:hover { background: var(--orange); } .round-arrow--ghost { background: #f0f0f0; color: #888; } .round-arrow--ghost:hover { background: var(--orange); color: #fff; } /* ============ MY LITTLE MAX ============ */ .max { position: relative; background: #fff; overflow: hidden; } /* yellow curved backdrop behind the lower half */ .max__bg { position: absolute; left: 0; top: 461px; width: 100%; height: auto; display: block; z-index: 0; } .max__inner { position: relative; z-index: 1; max-width: 100%; margin: 0 auto; padding: 40px 48px 60px; } /* header row */ .max__head { display: grid; grid-template-columns: 470px 1fr; gap: 30px; align-items: start; margin-bottom: 34px; } .max-intro__title { font-family: "Lemon", "Poppins", sans-serif; font-style: italic; font-size: 33.41px; color: var(--orange); margin-bottom: 12px; } .max-intro__icon { height: 48px; width: auto; vertical-align: -0.1em; margin-left: -9px; } .max-intro__text { font-family: "Poppins", sans-serif; font-size: 15px; color: #6f6f6f; line-height: 1.6; max-width: 425px; } /* category carousel */ .cat-carousel { display: flex; align-items: flex-start; gap: 20px; min-width: 0; } .cat-carousel__nav { display: flex; flex-direction: column; gap: 8px; flex: 0 0 auto; padding-top: 16px; } .cat-list { display: flex; gap: 26px; overflow-x: auto; overflow-y: hidden; flex: 1; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; } .cat-list::-webkit-scrollbar { display: none; } .cat { flex: 0 0 auto; width: 118px; display: flex; flex-direction: column; align-items: center; gap: 12px; } .cat__img { width: 118px; height: 118px; border-radius: 50%; overflow: hidden; background: #fff; border: 1px solid rgba(0, 0, 0, 0.10); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08); display: flex; align-items: center; justify-content: center; } .cat__img img { width: 92%; height: 94%; object-fit: contain; object-position: center; } .cat__name { font-family: "Inter", "Poppins", sans-serif; font-size: 14px; font-weight: 600; color: #222; width: 100%; text-align: center; } /* pastel background per category */ .cat:nth-child(1) .cat__img { background: #fbf0cb; } /* Food - cream */ .cat:nth-child(2) .cat__img { background: #f3d9f1; } /* Grooming - pink */ .cat:nth-child(3) .cat__img { background: #dde5f8; } /* Pharmacy - blue */ .cat:nth-child(4) .cat__img { background: #f8f1a4; } /* Walk Gear - lemon */ .cat:nth-child(5) .cat__img { background: #fbdfc1; } /* Toys - peach */ .cat:nth-child(6) .cat__img { background: #fbd7e2; } /* Creamy - pink */ /* body: puppy + recommended */ .max__body { display: grid; grid-template-columns: 369px 1fr; gap: 30px; align-items: start; margin-top: 76px; } .max-pup { position: relative; margin-top: -60px; } .max-pup img { width: 100%; max-width: 369px; display: block; opacity: 1; } /* recommended */ .reco { padding-left: 40px; min-width: 0; } .reco__head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 16px; } .reco__eyebrow { font-family: "Inter", "Poppins", sans-serif; font-size: 19.41px; color: #555; } .reco__title { font-family: "Lemon", "Poppins", sans-serif; font-size: 27.41px; color: var(--orange); } .reco__nav { display: flex; gap: 8px; } .reco__row { display: flex; gap: 22px; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; } .reco__row::-webkit-scrollbar { display: none; } /* product card */ .pcard { flex: 0 0 235px; position: relative; } .pcard__box { position: relative; background: #fff; border-radius: 14px; padding: 14px; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.07); margin-bottom: 14px; } .pcard__tag { position: absolute; top: 14px; left: 14px; background: #f7cb3e; color: #1c1c1c; font-size: 11px; font-weight: 600; padding: 3px 12px; border-radius: 5px; z-index: 1; } .pcard__img { height: 230px; border-radius: 10px; overflow: hidden; background: #fff; } .pcard__img img { width: 100%; height: 100%; object-fit: contain; padding: 8px; box-sizing: border-box; } .pcard__name { font-family: "Inter", "Poppins", sans-serif; font-size: 15px; font-weight: 700; color: #2b2b2b; margin-bottom: 7px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pcard__rating { font-size: 13px; color: #555; margin-bottom: 8px; } .pcard__rating .stars { background: var(--orange); color: #fff; padding: 2px 7px; border-radius: 4px; font-size: 12px; font-weight: 600; margin-right: 6px; } .pcard__price { font-size: 15px; } .pcard__price .was { color: #b0b0b0; text-decoration: line-through; font-family: "Inter", "Poppins", sans-serif; font-size: 14px; margin-right: 6px; } .pcard__price .now { color: var(--orange); font-weight: 700; font-size: 20px; } .pcard__price .now .rupee, .pcard__price .was .rupee { width: 0.9em; height: 1em; vertical-align: -0.14em; } .rupee { width: 0.6em; height: 0.95em; vertical-align: -0.13em; display: inline-block; margin-right: 1px; } /* ============ LITTLE MAX RECOMMENDATION ============ */ .lmax { position: relative; background: #fcebb4; overflow: hidden; padding: 74px 0 112px; } .lmax__wave { position: absolute; left: 0; width: 100%; height: 50px; display: block; z-index: 2; } .lmax__wave--top { top: 0; } .lmax__wave--bottom { bottom: 0; top: auto; height: 132px; z-index: 0; } .lmax__inner { position: relative; z-index: 1; max-width: 100%; margin: 0 auto; padding: 0 48px; } .lmax__head { margin-bottom: 26px; } .lmax__title { font-family: "Poppins", sans-serif; font-weight: 800; font-size: 30px; color: var(--orange); margin-bottom: 10px; } .lmax__text { font-family: "Poppins", sans-serif; font-size: 15px; color: #7d7a68; line-height: 1.6; max-width: 560px; } .lmax__carousel { position: relative; max-width: 900px; } .lmax__row { padding: 4px 0; } .lmax-prev, .lmax-next { position: absolute; top: 143px; transform: translateY(-50%); width: 44px; height: 44px; font-size: 14px; z-index: 3; } .lmax-prev { left: -18px; } .lmax-next { right: -18px; } .lmax__pup { position: absolute; right: 0; bottom: 0; height: 500px; width: auto; z-index: 3; display: block; } /* ============ POPULAR PROBLEMS (FOR DOG) ============ */ .probs { background: #fff; } .probs__inner { max-width: 100%; margin: 0 auto; padding: 44px 48px 10px; } .probs__head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 22px; } .probs__eyebrow { display: block; font-size: 15px; font-weight: 600; color: #2b2b2b; letter-spacing: 0.5px; margin-bottom: 2px; } .probs__title { font-family: "Poppins", sans-serif; font-weight: 800; font-size: 34px; color: var(--orange); } .probs__viewall { font-size: 14px; font-weight: 700; color: #2b2b2b; } .probs__viewall:hover { color: var(--orange); } .probs__tabs { display: flex; gap: 40px; border-bottom: 1px solid #e6e6e6; margin-bottom: 34px; overflow-x: auto; scrollbar-width: none; } .probs__tabs::-webkit-scrollbar { display: none; } .probs__tab { position: relative; background: none; border: none; padding: 10px 0 14px; font-family: inherit; font-size: 15px; font-weight: 500; color: #8a8a8a; cursor: pointer; white-space: nowrap; } .probs__tab.is-active { color: var(--orange); font-weight: 700; } .probs__tab.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--orange); } .probs__panel { display: none; } .probs__panel.is-active { display: block; } .probs__body { display: grid; grid-template-columns: 1fr 1.55fr; gap: 44px; align-items: start; } .probs__info { max-width: 480px; } .probs__q { font-size: 22px; font-weight: 700; color: var(--ink); margin-bottom: 10px; } .probs__desc { font-size: 14px; color: #6a6a6a; line-height: 1.6; margin-bottom: 20px; } .probs__exp-title { font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 6px; } .probs__exp { font-size: 14px; color: #6a6a6a; line-height: 1.65; margin-bottom: 24px; } .probs__btn { display: inline-block; text-decoration: none; background: var(--orange); color: #fff; border: none; border-radius: 8px; padding: 12px 26px; font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; } .probs__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .prob-card__box { position: relative; height: 258px; background: #fff; border: 1px solid #ececec; border-radius: 14px; overflow: hidden; margin-bottom: 12px; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.04); } .prob-card__tag { position: absolute; top: 12px; left: 12px; background: #ededed; color: #333; font-size: 11px; font-weight: 600; padding: 4px 12px; border-radius: 5px; z-index: 1; } .prob-card__fav { position: absolute; top: 12px; right: 12px; background: none; border: none; color: #333; font-size: 15px; cursor: pointer; z-index: 1; } .prob-card__img { height: 100%; display: flex; align-items: center; justify-content: center; padding: 16px; } .prob-card__img img { max-width: 100%; max-height: 100%; object-fit: contain; } .prob-card__name { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .prob-card__rating { font-size: 12px; color: #7a7a7a; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; } .prob-card__stars { background: var(--orange); color: #fff; padding: 2px 7px; border-radius: 4px; font-size: 11px; font-weight: 600; } .prob-card__price { display: flex; align-items: baseline; gap: 8px; } .prob-card__price .now { color: var(--orange); font-weight: 800; font-size: 18px; } .prob-card__price .was { color: #b0b0b0; text-decoration: line-through; font-size: 13px; } .probs__banners { max-width: 100%; margin: 40px auto 0; padding: 0 48px 20px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .prob-banner { display: block; } .prob-banner img { width: 100%; height: auto; display: block; border-radius: 12px; } /* ============ WHY CHOOSE US ============ */ .why { position: relative; background: #fff; display: grid; place-items: center; padding: 40px 24px 0; overflow: hidden; min-height: 0; } .why::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 56px; background: #eaf1fb; z-index: 2; } .why__blob-right { display: none; position: absolute; right: -40px; bottom: -40px; width: 407px; height: auto; z-index: 1; } .why__blob { display: none; position: absolute; left: 0px; bottom: 0; width: 440px; height: auto; z-index: 1; } .why__content { position: relative; z-index: 1; max-width: 772px; text-align: center; padding-bottom: 28px; } .why__eyebrow { font-size: 19px; color: #444; } .why__title { font-family: "Poppins", sans-serif; font-weight: 800; font-style: normal; font-size: 27px; color: var(--orange); margin-bottom: 20px; } .why__text { font-size: 14px; color: #4d4d4d; line-height: 1.9; margin-bottom: 20px; } .why__text strong { color: #2b2b2b; font-weight: 700; } .why__cards { display: flex; justify-content: center; gap: 16px; margin-top: 24px; } .vcard { background: #fff; width: 108px; height: 96px; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); } .vcard__ic { font-size: 40px; line-height: 1; } .vcard__png { width: 44px; height: 42px; object-fit: contain; display: block; } .vcard__ic--love { color: var(--orange); } .vcard__ic--learn { color: var(--orange); } .vcard__ic--loyal { color: var(--orange); } .vcard__label { font-size: 16px; font-weight: 700; color: #333; } .why__photo { position: absolute; bottom: 96px; height: auto; z-index: 2; } .why__photo--left { left: 0; width: 425px; bottom: 60px; } .why__photo--right { right: 44px; width: 314px; bottom: 118px; } /* category strip */ .why { padding-bottom: 68px; } .why__cats { position: relative; z-index: 5; width: 100%; max-width: 900px; margin: 18px auto 0; display: flex; align-items: center; gap: 12px; } .why__cat-list { display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden; flex: 1; justify-content: space-between; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; } .why__cat-list::-webkit-scrollbar { display: none; } .catx { flex: 0 0 auto; width: 122px; background: #fff; border-radius: 14px; padding: 10px 10px 9px; box-shadow: none; display: flex; flex-direction: column; align-items: center; gap: 9px; } .catx__img { width: 100%; height: 92px; border-radius: 10px; background: #fdf3d5; display: flex; align-items: center; justify-content: center; overflow: hidden; } .catx__img img { width: 74%; height: 82%; object-fit: contain; } .catx__name { font-family: "Inter", "Poppins", sans-serif; font-size: 14px; font-weight: 600; color: #2b2b2b; text-align: center; } .whycat-prev, .whycat-next { flex: 0 0 auto; } .why__wave { position: absolute; left: 0; bottom: 34px; width: 100%; height: auto; display: block; z-index: 3; } /* ============ BEST SELLING ============ */ .best { background: #fff; padding: 56px 0 64px; } .best__inner { max-width: 100%; margin: 0 auto; padding: 0 48px; display: grid; grid-template-columns: 370px 1fr; gap: 40px; align-items: center; } .find--cat .best__inner { grid-template-columns: 1fr 370px; } .best__video { position: relative; border-radius: 16px; overflow: hidden; background: #e9e9e9; width: 370px; height: 482px; } .best__video img { width: 100%; height: 100%; object-fit: cover; display: block; } .best__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.9); color: var(--orange); font-size: 20px; cursor: pointer; display: grid; place-items: center; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2); } .best__main { min-width: 0; } .best__head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 18px; padding-right: 8px; } .best__eyebrow { font-family: "Inter", "Poppins", sans-serif; font-size: 19.41px; color: #555; } .best__title { font-family: "Lemon", "Poppins", sans-serif; font-size: 33.41px; color: var(--orange); } .best__nav { display: flex; gap: 8px; } .best__row { display: flex; gap: 20px; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 4px; } .best__row::-webkit-scrollbar { display: none; } .bcard { flex: 0 0 235px; position: relative; } .bcard__box { position: relative; height: 258px; background: #fff; border: 1px solid #ececec; border-radius: 14px; overflow: hidden; margin-bottom: 12px; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.06); } .bcard__tag { position: absolute; top: 14px; left: 14px; background: #f7cb3e; color: #1c1c1c; font-size: 11px; font-weight: 600; padding: 3px 12px; border-radius: 5px; z-index: 1; } .bcard__fav { position: absolute; top: 14px; right: 14px; border: none; background: none; padding: 0; color: #2b2b2b; cursor: pointer; font-size: 18px; line-height: 1; z-index: 1; } .bcard__img { width: 100%; height: 100%; display: grid; place-items: center; } .bcard__img img { max-width: 86%; max-height: 86%; object-fit: contain; } .bcard__name { font-family: "Inter", "Poppins", sans-serif; font-size: 15px; font-weight: 700; color: #2b2b2b; margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bcard__rating { font-family: "Inter", "Poppins", sans-serif; font-weight: 500; font-size: 13px; color: #7a7a7a; margin-bottom: 12px; } .bcard__rating .stars { color: #fff; background: var(--amber); letter-spacing: 1px; padding: 4px 8px; border-radius: 5px; font-size: 13px; margin-right: 6px; } .bcard__buy { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .bcard__prices { display: flex; flex-direction: column; line-height: 1.15; } .bcard__now { color: var(--orange); font-weight: 700; font-size: 20px; white-space: nowrap; } .bcard__now .rupee { width: 0.9em; height: 1em; vertical-align: -0.14em; } .bcard__was { color: #b0b0b0; text-decoration: line-through; font-family: "Inter", "Poppins", sans-serif; font-size: 14px; white-space: nowrap; } .bcard__was .rupee { width: 0.9em; height: 1em; vertical-align: -0.14em; } .bcard__cart { background: var(--orange); color: #fff; border: none; border-radius: 7px; width: 96px; height: 30px; padding: 0; font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; } /* ============ FEATURED PRODUCT ============ */ .feat { background: #eaf1fb; padding: 40px 0 64px; } .feat__inner { max-width: 100%; margin: 0 auto; padding: 0 48px; } .feat__head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 24px; } .feat__eyebrow { display: block; font-family: "Inter", "Poppins", sans-serif; font-size: 19.41px; color: #444; letter-spacing: 0.5px; } .feat__title { font-family: "Poppins", sans-serif; font-weight: 800; font-style: normal; font-size: 33.41px; color: var(--orange); } .feat__viewall { font-size: 15px; font-weight: 700; color: #2b2b2b; } .feat__viewall:hover { color: var(--orange); } .feat__row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; } .fcard { min-width: 0; } .fcard__box { position: relative; height: 258px; background: #fff; border-radius: 14px; overflow: hidden; margin-bottom: 12px; display: grid; place-items: center; } .fcard__fav { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border: none; background: #fff; border-radius: 50%; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14); padding: 0; color: #2b2b2b; cursor: pointer; font-size: 15px; line-height: 1; display: flex; align-items: center; justify-content: center; z-index: 2; } .fcard__img { width: 100%; height: 100%; display: grid; place-items: center; padding: 16px; box-sizing: border-box; } /* Any uploaded image (small or large, portrait or square) is scaled to fill the box uniformly while keeping its aspect ratio — never cropped, never left tiny. */ .fcard__img img { width: 100%; height: 100%; object-fit: contain; } .fcard__name { font-family: "Inter", "Poppins", sans-serif; font-size: 15px; font-weight: 700; color: #2b2b2b; margin-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fcard__rating { font-family: "Inter", "Poppins", sans-serif; font-size: 13px; color: #7a7a7a; margin-bottom: 10px; } .fcard__rating .fbadge { background: var(--orange); color: #fff; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 5px; margin-right: 6px; } .fcard__rating .fbadge i { font-size: 10px; } .fcard__now { color: #1c1c1c; font-weight: 800; font-size: 18px; } .fcard__was { color: #b0b0b0; text-decoration: line-through; font-size: 14px; margin-left: 6px; } /* ============ NEWEST PRODUCT ============ */ .newest { background: #fff; padding: 48px 0 56px; } .newest__inner { max-width: 100%; margin: 0 auto; padding: 0 48px; } .newest__head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 24px; } .newest__eyebrow { display: block; font-family: "Inter", "Poppins", sans-serif; font-size: 19.41px; color: #444; letter-spacing: 0.5px; } .newest__title { font-family: "Poppins", sans-serif; font-weight: 800; font-size: 33.41px; color: var(--orange); } .newest__viewall { font-size: 15px; font-weight: 700; color: #2b2b2b; } .newest__viewall:hover { color: var(--orange); } .newest__row { display: flex; gap: 20px; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 4px; } .newest__row::-webkit-scrollbar { display: none; } /* Show exactly 6 whole cards (5 × 20px gaps = 100px); the arrows page through the rest — no half-cut card at the right edge. Cards snap into place. */ .newest__row { scroll-snap-type: x proximity; } .newest__row .fcard { flex: 0 0 calc((100% - 100px) / 6); align-self: start; scroll-snap-align: start; } @media (max-width: 1100px) { .newest__row .fcard { flex: 0 0 calc((100% - 60px) / 4); } } @media (max-width: 700px) { .newest__row .fcard { flex: 0 0 calc((100% - 20px) / 2); } } /* Header actions: View All + carousel arrows on the right. */ .newest__actions { display: flex; align-items: center; gap: 16px; } .newest__nav { display: flex; gap: 8px; } /* Featured & Newest product cards share the exact same framed look. */ .feat__row .fcard__box, .newest__row .fcard__box { background: #fff; border: 1px solid #eee; border-radius: 14px; } /* Everything else about the box — white fill, 1px frame, radius, centring — already comes from the shared rule above and the .fcard__box base, so the only thing Newest changes is the height: it shows 6 cards to a row, so the box is shorter than Featured's. It used to repaint the fill #faf9f7 here, which left a grey ring around the (white) product image. */ .newest__row .fcard__box { height: 240px; } /* Featured & Newest: show the FULL product image, never cropped. Each image is scaled to fit inside the box and centred with even padding, so nothing is cut off. (For perfectly uniform sizing, upload square, product-centred photos.) */ .feat__row .fcard__img, .newest__row .fcard__img { width: 100%; height: 100%; display: grid; place-items: center; padding: 6px; box-sizing: border-box; } .feat__row .fcard__img img, .newest__row .fcard__img img { width: 100%; height: 100%; object-fit: contain; } .newest .fcard__rating .nstar { color: #1c1c1c; font-weight: 700; margin-right: 6px; } .newest .fcard__rating .nstar i { font-size: 12px; } /* ============ AM TO PM TREATS ============ */ .treat { background: #fbe7b0; padding: 44px 0 56px; } .treat__inner { max-width: 100%; margin: 0 auto; padding: 0 48px; } .treat__head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 24px; } .treat__eyebrow { display: block; font-family: "Inter", "Poppins", sans-serif; font-size: 19.41px; color: #333; } .treat__title { font-family: "Poppins", sans-serif; font-weight: 800; font-size: 33.41px; color: var(--orange); } .treat__viewall { font-size: 15px; font-weight: 700; color: #2b2b2b; } .treat__viewall:hover { color: var(--orange); } .treat__row { display: flex; gap: 22px; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 4px; } .treat__row::-webkit-scrollbar { display: none; } .tcard { flex: 0 0 360px; } .tcard__img { width: 100%; height: 268px; border-radius: 14px; overflow: hidden; background: #fff; } .tcard__img img { width: 100%; height: 100%; object-fit: cover; display: block; } .tcard__meta { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; } .tcard__name { font-family: "Inter", "Poppins", sans-serif; font-size: 17px; font-weight: 700; color: #1c1c1c; } .tcard__price { font-family: "Inter", "Poppins", sans-serif; font-size: 15px; font-weight: 700; color: #1c1c1c; } /* ============ PROMO BANNERS ============ */ .promos { background: #fff; padding: 8px 0 60px; } .promos__inner { max-width: 100%; margin: 0 auto; padding: 0 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .promo { display: block; border-radius: 14px; overflow: hidden; aspect-ratio: 451 / 207; background: #ededed; } .promo img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ============ RESPONSIVE ============ */ @media (max-width: 1100px) { .nav { gap: 14px; } .nav__item { font-size: 14px; } .navbar__right .search { width: 180px; } .hero__display { font-size: 60px; } } /* ============ WORLD OF WAG TALES + CTA ============ */ .explore { position: relative; z-index: 1; background: #fff; overflow: hidden; padding-top: 56px; padding-bottom: 72px; } .explore__wave { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 897px; z-index: 0; } .explore__inner { position: relative; z-index: 1; max-width: 100%; margin: 0 auto; padding: 0 48px; } .explore__head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 22px; } .explore__eyebrow { display: block; font-family: "Inter", "Poppins", sans-serif; font-size: 19.41px; color: #555; } .explore__title { font-family: "Poppins", sans-serif; font-weight: 800; font-style: normal; font-size: 33.41px; color: var(--orange); } .explore__nav { display: flex; gap: 8px; } .explore__row { display: flex; gap: 20px; overflow-x: auto; /* Match the other carousels (.newest__row, .feat__row …): without an explicit overflow-y the box becomes scrollable on BOTH axes, so it swallows vertical swipes on touch. `contain` also stops a swipe past the last reel from chaining into the page scroll. */ overflow-y: hidden; overscroll-behavior-x: contain; scroll-behavior: smooth; scrollbar-width: none; padding-bottom: 6px; } .explore__row::-webkit-scrollbar { display: none; } .vvideo { position: relative; flex: 0 0 320px; height: 450px; border-radius: 16px; overflow: hidden; background: #e9e9e9; } .vvideo img { width: 100%; height: 100%; object-fit: cover; display: block; } .explore__row .vvideo:nth-child(3) img { transform: scale(1.13); } .vvideo__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 56px; height: 56px; border: none; border-radius: 50%; background: #fff; color: var(--orange); font-size: 18px; display: grid; place-items: center; cursor: pointer; box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.55), 0 0 0 9px #f2b70d; } .vvideo__time { position: absolute; left: 12px; bottom: 12px; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 11px; padding: 2px 8px; border-radius: 5px; } .explore__cta { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px; padding: 40px 24px 130px; } .explore__cta-text { max-width: 540px; margin-left: 48px; } .explore__cta-title { font-family: "Inter", "Poppins", sans-serif; font-size: 40.07px; font-weight: 600; color: var(--ink); line-height: 1.15; } .explore__cta-title span { display: block; font-family: "Lemon", "Poppins", sans-serif; font-weight: 800; font-size: 55.58px; color: var(--orange); margin-top: 6px; } .explore__cta-text p { font-family: "Poppins", sans-serif; font-weight: 500; font-size: 20.61px; color: #5a4a25; line-height: 1.6; margin: 16px 0 22px; } .explore__cta-btn { background: var(--orange); color: #fff; border: none; border-radius: 8px; padding: 13px 78px; font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer; } .explore__cta-img { align-self: end; margin-bottom: 60px; display: flex; align-items: flex-end; justify-content: flex-end; position: relative; left: -50px; } .explore__cta-img .cta-cat { display: block; height: 320px; width: auto; position: relative; top: -4px; } .explore__cta-img .cta-dog { display: block; height: 400px; width: auto; margin-left: -10px; position: relative; top: -4px; left: -25px; transform: scale(1.5); transform-origin: bottom center; } /* ============ PET PARENT STORIES ============ */ .stories { position: relative; z-index: 2; background: transparent; text-align: center; padding: 40px 24px 0; margin-top: -110px; } .stories::before { content: ""; position: absolute; left: 0; right: 0; top: 290px; bottom: -40px; background: #F0F6FF; z-index: 0; } .stories__wave { position: absolute; left: 0; top: 210px; width: 100%; height: auto; z-index: 1; pointer-events: none; } .stories__head { margin-bottom: 6px; } .stories__eyebrow { display: block; font-family: "Inter", "Poppins", sans-serif; font-size: 19.41px; color: #555; } .stories__title { font-family: "Lemon", "Poppins", sans-serif; font-style: italic; font-size: 33.41px; color: var(--orange); } .stories__dog { line-height: 0; } .stories__dog { position: relative; z-index: 6; } .stories__dog img { display: block; margin: 0 auto -67px; height: 320px; width: auto; position: relative; z-index: 6; } .stories__carousel { position: relative; z-index: 5; width: 720px; max-width: 100%; margin: 0 auto -40px; } .stories__viewport { position: relative; overflow: hidden; } .stories__track { display: flex; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; } .stories__track::-webkit-scrollbar { display: none; } .stories__nav { position: absolute; inset: 0; z-index: 6; pointer-events: none; } .stories__nav .round-arrow { position: absolute; top: 48%; transform: translateY(-50%); width: 46px; height: 46px; font-size: 15px; background: #1c1c1c; color: #fff; pointer-events: auto; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18); } .stories__nav .round-arrow:hover { background: var(--orange); color: #fff; } .stories-prev { left: -28px; } .stories-next { right: -28px; } .review { position: relative; z-index: 1; flex: 0 0 100%; width: 100%; background: transparent; text-align: left; } /* torn-paper white backdrop */ .review__paper { position: absolute; inset: 16px 26px 22px; background: #fff; filter: url(#tornEdge); z-index: 0; } .review__body { position: relative; z-index: 1; display: flex; flex-direction: column; height: 328px; padding: 26px 40px 22px; } .review__top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .review__g { display: block; } .review__stars { color: #f4a300; font-size: 18px; letter-spacing: 2px; } .review__title { font-size: 17px; font-weight: 700; color: var(--ink); margin-bottom: 10px; } .review__text { font-size: 13.5px; color: #6a6a6a; line-height: 1.6; margin-bottom: 14px; } .review__thumbs { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .review__thumb { position: relative; flex: 0 0 108px; width: 108px; height: 88px; border-radius: 0; overflow: hidden; background: #e9e9e9; } .review__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .review__thumb--more::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); } .review__more { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 15px; font-weight: 600; z-index: 1; } .review__author { display: flex; align-items: center; gap: 12px; margin-top: auto; } .review__avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; background: #ddd; } .review__who { display: flex; flex-direction: column; line-height: 1.3; } .review__who strong { font-size: 14px; color: var(--ink); } .review__who span { font-size: 12px; color: #999; } /* ============ PET SOLUTION FINDER ============ */ .finder { background: #fff; padding: 96px 0 72px; } .finder__inner { max-width: 100%; margin: 0 auto; padding: 0 48px; display: grid; grid-template-columns: 1fr 470px; gap: 60px; align-items: center; } .finder__eyebrow { display: block; font-family: "Inter", "Poppins", sans-serif; font-size: 18px; letter-spacing: 1px; color: #1c1c1c; margin-bottom: 14px; } .finder__title { font-family: "Poppins", sans-serif; font-weight: 800; font-size: 40px; line-height: 1.2; color: var(--orange); margin-bottom: 20px; } .finder__text { font-size: 16px; color: #8a8a8a; line-height: 1.7; margin-bottom: 26px; max-width: 560px; } .finder__list { display: flex; flex-direction: column; gap: 15px; } .finder__list li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; color: #2b2b2b; } .finder__list i { color: #1c1c1c; font-size: 13px; margin-top: 4px; } .finder__card { background: #f7f7f8; /* Same hairline the product / gallery cards use, so the panel has a defined edge against the white section instead of fading into it. */ border: 1px solid var(--line); border-radius: 18px; padding: 30px 30px 24px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06); } .finder__card-title { font-family: "Poppins", sans-serif; font-weight: 700; font-size: 22px; color: var(--ink); margin-bottom: 24px; } .finder__field { margin-bottom: 20px; } .finder__field > label { display: block; font-size: 14px; font-weight: 600; color: #2b2b2b; margin-bottom: 10px; } .finder__field input { width: 100%; height: 48px; border: 1px solid #e2e2e5; border-radius: 10px; padding: 0 16px; font-family: inherit; font-size: 14px; color: #333; background: #fff; outline: none; } .finder__field input::placeholder { color: #aaa; } .finder__opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } /* Multi-step wizard. */ .finder__step[hidden] { display: none; } .finder__back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 12px; padding: 0; background: none; border: none; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 600; color: #8a8a8a; } .finder__back:hover { color: var(--orange); } .finder__problems { display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow-y: auto; margin-bottom: 16px; } .finder__problem { display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; background: #fff; border: 1px solid #e2e2e5; border-radius: 10px; padding: 13px 15px; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 600; color: #1c1c1c; transition: border-color 0.15s, background 0.15s; } .finder__problem[hidden] { display: none; } .finder__problem:hover { border-color: #c9c9cf; } .finder__problem.is-active { border-color: var(--orange); background: #fff7f2; color: var(--orange); } .finder__problem i { color: #c3c3c3; flex-shrink: 0; } .finder__problem.is-active i { color: var(--orange); } .finder__results { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 14px; min-height: 90px; max-height: 340px; overflow-y: auto; padding-right: 2px; } /* Compact product cards so the wizard card keeps its size in step 3. */ .finder__results .prob-card__box { height: 118px; margin-bottom: 8px; border-radius: 10px; box-shadow: none; } .finder__results .prob-card__img { padding: 10px; } .finder__results .prob-card__name { font-size: 12.5px; margin-bottom: 4px; } .finder__results .prob-card__rating { font-size: 11px; margin-bottom: 4px; } .finder__results .prob-card__stars { padding: 1px 6px; font-size: 10px; } .finder__results .prob-card__price .now { font-size: 15px; } .finder__results .prob-card__price .was { font-size: 12px; } .finder__results .prob-card__fav { width: 26px; height: 26px; } .finder__loading, .finder__noresult { grid-column: 1 / -1; margin: 0; padding: 24px 0; text-align: center; color: #9a9a9a; font-size: 14px; } .finder__foot--result { justify-content: flex-start; } .finder__detail-link { display: inline-flex; align-items: center; gap: 8px; color: var(--orange); font-weight: 700; font-size: 14px; text-decoration: none; } .finder__detail-link:hover { text-decoration: underline; } .finder__result-title { font-size: 18px; } /* Breed autocomplete dropdown. */ .finder__combo { position: relative; } .finder__breed-list { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30; max-height: 232px; overflow-y: auto; margin: 0; padding: 6px; list-style: none; background: #fff; border: 1px solid #e2e2e5; border-radius: 10px; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.14); } .finder__breed-item { padding: 9px 12px; border-radius: 7px; cursor: pointer; font-size: 14px; color: #1c1c1c; } .finder__breed-item:hover { background: #fff7f2; color: var(--orange); } .fopt { display: flex; flex-direction: column; align-items: center; gap: 3px; background: #fff; border: 1px solid #e2e2e5; border-radius: 10px; padding: 12px 6px; cursor: pointer; font-family: inherit; transition: border-color 0.15s; } .fopt strong { font-size: 15px; color: #1c1c1c; font-weight: 700; } .fopt span { font-size: 12px; color: #999; } .fopt:hover { border-color: #c9c9cf; } .fopt.is-active { border-color: var(--orange); background: #fff7f2; } .finder__foot { display: flex; justify-content: flex-end; margin-top: 6px; } .finder__next { display: inline-flex; align-items: center; gap: 8px; background: #e6e6e8; color: #9a9a9a; border: none; border-radius: 8px; padding: 10px 18px; font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; } .finder__next.is-ready { background: var(--orange); color: #fff; } /* ============ FAQ — PET PARENTS OFTEN ASK ============ */ .faq { position: relative; z-index: 1; background: #fff; padding: 12px 0 64px; } .faq__inner { max-width: 100%; margin: 0 auto; padding: 0 48px; } .faq__head { margin-bottom: 30px; } .faq__eyebrow { display: block; font-size: 16px; color: #555; margin-bottom: 4px; } .faq__title { font-family: "Poppins", sans-serif; font-weight: 800; font-style: normal; font-size: 28px; color: var(--orange); } .faq__cols { display: grid; grid-template-columns: 1fr 1fr; column-gap: 70px; } .faq-item { border-bottom: 1px solid #e6e6e6; } .faq-item__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 18px; background: none; border: none; cursor: pointer; text-align: left; font-family: inherit; font-size: 17.64px; font-weight: 700; line-height: 27.4px; color: var(--ink); padding: 18px 0; } .faq-item__icon { flex: 0 0 auto; width: 22px; text-align: center; font-size: 20px; font-weight: 400; color: #555; line-height: 1; } .faq-item__icon::before { content: "+"; } .faq-item.is-open .faq-item__icon::before { content: "\2212"; } .faq-item__a { display: none; font-size: 14.6px; color: #8a8a8a; line-height: 20.4px; padding: 0 44px 18px 0; } .faq-item.is-open .faq-item__a { display: block; } /* ============ FOOTER ============ */ .footer { background: #fce8d2; } .footer__main { max-width: 100%; margin: 0 auto; padding: 48px 48px 30px; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.1fr 1.2fr; gap: 30px; } .footer__logo img { height: 56px; width: auto; display: block; margin-bottom: 18px; } .footer__sub { font-size: 14px; color: #2b2b2b; margin-bottom: 12px; } .footer__news { display: flex; align-items: center; background: #fff; border: 1px solid #f0c89a; border-radius: 8px; padding: 5px; width: 326px; max-width: 100%; height: 50px; margin-bottom: 20px; } .footer__news input { flex: 1; border: none; background: transparent; outline: none; font-family: inherit; font-size: 13.5px; padding: 0 12px; color: #555; min-width: 0; } .footer__news button { flex: 0 0 auto; width: 107px; height: 40px; border: none; background: var(--orange); color: #fff; font-family: inherit; font-size: 14px; font-weight: 600; border-radius: 6px; cursor: pointer; } .footer__keep { font-size: 14px; font-weight: 600; color: #2b2b2b; margin-bottom: 12px; } .footer__social { display: flex; gap: 12px; } .fsocial { width: 36px; height: 36px; border-radius: 50%; background: var(--orange); color: #fff; display: grid; place-items: center; font-size: 15px; } .footer__title { font-size: 15px; font-weight: 700; color: #2b2b2b; letter-spacing: 0.4px; margin-bottom: 18px; } .footer__links li { margin-bottom: 13px; } .footer__links a { font-size: 14px; color: #4a4a4a; } .footer__links a:hover { color: var(--orange); } .footer__contact { display: flex; flex-direction: column; gap: 16px; } .footer__contact li { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; color: #4a4a4a; line-height: 1.4; } /* The whole row is the tap target (icon included), so the anchor has to carry the row layout that the
  • uses for the non-linked rows. */ .footer__contact li > .fcontact { display: flex; align-items: flex-start; gap: 12px; width: 100%; color: inherit; } .footer__contact li > .fcontact:hover .fcontact__text { color: var(--orange); } .fcicon { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: var(--orange); color: #fff; display: grid; place-items: center; font-size: 13px; } .footer__features { max-width: 1080px; margin: 0 auto; padding: 10px 24px 30px; display: grid; grid-template-columns: repeat(5, 200px); justify-content: center; gap: 20px; } .ffeat { height: 68px; display: flex; align-items: center; justify-content: center; gap: 10px; background: #fff; border: 1px solid #f0d6b6; border-radius: 12px; padding: 0 12px; font-size: 14px; font-weight: 600; color: #2b2b2b; } .ffeat i { color: var(--orange); font-size: 20px; } .footer__pop { max-width: 100%; margin: 0 auto; padding: 22px 48px 30px; border-top: 1px solid #f0d6b6; } .footer__pop-title { font-size: 17px; font-weight: 700; color: var(--orange); margin-bottom: 16px; } .footer__pop-list { font-size: 13.5px; color: #4a4a4a; line-height: 2; } .footer__bar { background: var(--orange); color: #fff; } .footer__bar__inner { display: flex; align-items: center; gap: 22px; padding: 8px 48px; flex-wrap: wrap; } .footer__copy { font-size: 14px; font-weight: 600; } .footer__bar-div { width: 1px; height: 26px; background: rgba(255, 255, 255, 0.45); } .footer__pay { display: flex; align-items: center; gap: 14px; } .footer__pay .pay-chip { width: 50px; height: 30px; background: #fff; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; } .footer__pay .pay-svg { display: block; height: auto; } .footer__pay .pay-svg--visa { width: 34px; } .footer__pay .pay-svg--diners { width: 20px; color: #0079be; } .footer__pay .pay-chip .pay-mc { width: 30px; height: auto; display: block; } .footer__pay .pay-chip .pay-amex { position: relative; width: 46px; height: 27px; background: #006fcf; color: #fff; font-family: Arial, sans-serif; font-weight: 800; font-size: 9px; letter-spacing: 0.5px; line-height: 1; border-radius: 3px; display: flex; align-items: center; justify-content: center; } .footer__pay .pay-chip--pp { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; line-height: 1; } .footer__pay .pay-chip--pp .pay-svg--paypal { display: block; height: 15px; width: auto; } .footer__pay .pay-chip--pp .pp-text { display: block; margin-top: 1px; font-family: Arial, sans-serif; font-weight: 800; font-size: 7px; font-style: italic; line-height: 1; } .footer__pay .pay-chip--pp .pp-a { color: #253b80; } .footer__pay .pay-chip--pp .pp-b { color: #179bd7; } .footer__credit { margin-left: auto; } .fa-cc-visa { color: #1a1f71; } .fa-cc-diners-club { color: #0079be; } .fa-cc-amex { color: #2e77bb; } .fa-cc-mastercard { color: #eb001b; } .fa-cc-paypal { color: #003087; } .footer__credit { font-size: 13px; color: #ffe6d6; } /* When a link is set, keep it reading as the same quiet credit line — the orange bar already carries the colour, an underlined blue link would shout. */ .footer__credit a { color: inherit; text-decoration: none; } .footer__credit a:hover { color: #fff; text-decoration: underline; } @media (max-width: 860px) { .topbar__right { gap: 10px; } .topbar__follow span { display: none; } .hero { grid-template-columns: 1fr; } .hero__right { min-height: 360px; } .hero-arrow { width: 38px; height: 38px; } .hero-dots { left: 22px; bottom: 12px; } .max__head { grid-template-columns: 1fr; } .max__body { grid-template-columns: 1fr; } .reco__row { grid-template-columns: repeat(2, 1fr); } .why__photo { display: none; } .best__inner { grid-template-columns: 1fr; } .promos__inner { grid-template-columns: 1fr; } .explore__cta { grid-template-columns: 1fr; } .explore__cta-img { display: none; } .faq__cols { grid-template-columns: 1fr; column-gap: 0; } .probs__body { grid-template-columns: 1fr; } .probs__cards { grid-template-columns: repeat(2, 1fr); } .probs__banners { grid-template-columns: 1fr; } .finder__inner { grid-template-columns: 1fr; gap: 32px; } .finder__title { font-size: 32px; } .footer__main { grid-template-columns: 1fr 1fr; } .footer__features { grid-template-columns: repeat(2, 1fr); } .footer__bar__inner { justify-content: center; text-align: center; } } /* ============================================================ POPULAR PROBLEMS (inner page) ============================================================ */ .pp-banner { line-height: 0; font-size: 0; } .pp-banner__img { display: block; width: 100%; height: auto; } .pp-wrap { max-width: 100%; margin: 0 auto; padding: 0 48px; } .pp-controls { display: flex; justify-content: flex-end; padding-top: 34px; } .pp-ages { display: flex; gap: 12px; } .pp-age { border: 1px solid #d9d9d9; background: #fff; color: var(--ink); font-family: "Poppins", sans-serif; font-weight: 600; font-size: 15px; padding: 10px 24px; border-radius: 8px; cursor: pointer; transition: 0.15s; } .pp-age.is-active { background: #1c1c1c; color: #fff; border-color: #1c1c1c; } .pp-tabs { display: flex; gap: 40px; border-bottom: 1px solid #ececec; margin-top: 18px; } .pp-tab { background: none; border: none; padding: 0 0 14px; font-family: "Poppins", sans-serif; font-weight: 600; font-size: 17px; color: #8a8a8a; cursor: pointer; position: relative; } .pp-tab.is-active { color: var(--orange); } .pp-tab.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--orange); border-radius: 2px; } .pp-list { margin: 26px 0 0; display: flex; flex-direction: column; gap: 8px; } .pp-row { display: flex; align-items: center; gap: 18px; padding: 16px 22px; border-radius: 8px; text-decoration: none; color: var(--ink); transition: 0.15s; } .pp-row:nth-child(odd) { background: #fce7a4; } .pp-row:nth-child(even) { background: #fdf3cd; } .pp-row:hover { filter: brightness(0.98); } .pp-row__ic { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; background: var(--orange); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 17px; } .pp-row__title { flex: 1; font-family: "Poppins", sans-serif; font-weight: 700; font-size: 17px; } .pp-row__answer { display: inline-flex; align-items: center; gap: 8px; color: var(--orange); font-size: 14px; font-weight: 500; white-space: nowrap; } .pp-row.is-hidden { display: none; } .pp-more-wrap { text-align: center; padding: 36px 0 74px; } .pp-more { background: var(--orange); color: #fff; border: none; font-family: "Poppins", sans-serif; font-weight: 600; font-size: 15px; padding: 13px 32px; border-radius: 8px; cursor: pointer; transition: 0.15s; } .pp-more:hover { background: #d94e1a; } @media (max-width: 720px) { .pp-wrap { padding: 0 20px; } /* Wrap the topic tabs onto multiple rows so every topic stays visible — a single scrolling row pushed the later ones (Grooming, Lifestyle) off-screen. */ .pp-tabs { flex-wrap: wrap; gap: 4px 20px; justify-content: center; overflow-x: visible; } .pp-tab { font-size: 14px; padding: 4px 0 10px; white-space: nowrap; } .pp-controls { justify-content: center; } } @media (max-width: 360px) { .pp-tabs { gap: 4px 14px; } .pp-tab { font-size: 13px; } } /* ============================================================ PROBLEM DETAIL (inner page) ============================================================ */ .pd-detail { padding: 36px 0 6px; } .pd-title { font-family: "Poppins", sans-serif; font-weight: 800; font-size: 30px; color: var(--orange); margin: 0 0 12px; } .pd-desc { color: #6b6b6b; font-size: 16px; line-height: 1.6; max-width: 760px; margin: 0 0 6px; } .pd-acc { border-bottom: 1px solid #ececec; padding: 22px 0; } .pd-acc__head { display: flex; align-items: center; justify-content: space-between; cursor: pointer; } .pd-acc__title { display: flex; align-items: center; gap: 12px; font-family: "Poppins", sans-serif; font-weight: 700; font-size: 20px; color: var(--ink); } .pd-acc__title::before { content: ""; width: 4px; height: 22px; background: var(--orange); border-radius: 2px; display: inline-block; } .pd-acc__chev { color: #333; font-size: 15px; transition: transform 0.2s; } .pd-acc.is-open .pd-acc__chev { transform: rotate(180deg); } .pd-acc__body { padding: 16px 0 2px 16px; } .pd-acc:not(.is-open) .pd-acc__body { display: none; } .pd-acc__body p { color: #6b6b6b; font-size: 16px; line-height: 1.6; margin: 0; max-width: 1040px; } .pd-checks { display: flex; flex-wrap: wrap; gap: 16px 30px; } .pd-check { display: inline-flex; align-items: center; gap: 8px; color: #444; font-size: 15px; } .pd-check i { color: #333; font-size: 13px; } .pd-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .pd-list li { position: relative; padding-left: 18px; color: #4a4a4a; font-size: 16px; } .pd-list li::before { content: "\2022"; position: absolute; left: 2px; color: #8a8a8a; } /* remanded products */ .pd-reco { padding: 26px 0 24px; } .pd-reco__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; flex-wrap: wrap; gap: 14px; } .pd-reco__title { font-family: "Poppins", sans-serif; font-weight: 800; font-size: 22px; color: var(--ink); } .pd-tools { display: flex; gap: 12px; flex-wrap: wrap; } .pd-tool { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #e2e2e2; background: #fff; border-radius: 8px; padding: 9px 16px; font-family: "Inter", sans-serif; font-size: 14px; font-weight: 500; color: var(--ink); cursor: pointer; } .pd-tool i { color: #555; } .pd-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; } .pd-grid .fcard__box { border: 1px solid #eee; } @media (max-width: 1100px) { .pd-grid { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 760px) { .pd-grid { grid-template-columns: repeat(2, 1fr); } .pd-checks { gap: 12px 20px; } .pd-reco__head { flex-direction: column; align-items: flex-start; } } /* ===== Shop & Our Journey page styles (from design v337) ===== */ /* ============================================================ E-COMMERCE (shop, product, cart, checkout, account, pages) ============================================================ */ .icon-btn--badge { position: relative; } .icon-badge { position: absolute; top: -6px; right: -8px; min-width: 17px; height: 17px; background: var(--orange); color: #fff; border-radius: 10px; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 4px; } .wt-toast { position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%) translateY(20px); background: #1c1c1c; color: #fff; padding: 12px 22px; border-radius: 10px; font-size: 14px; font-weight: 600; z-index: 999; opacity: 0; pointer-events: none; transition: 0.25s; box-shadow: 0 8px 24px rgba(0,0,0,0.25); } .wt-toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); } .wt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: 9px; padding: 12px 24px; font-family: "Poppins", sans-serif; font-weight: 600; font-size: 15px; cursor: pointer; text-decoration: none; transition: 0.15s; } .wt-btn--primary { background: var(--orange); color: #fff; } .wt-btn--primary:hover { background: #d94e1a; } .wt-btn--ghost { background: #fff; color: var(--ink); border-color: #e0e0e0; } .wt-btn--ghost:hover { border-color: var(--orange); color: var(--orange); } .wt-block { display: flex; width: 100%; margin-top: 10px; } .wt-add { margin-top: 10px; width: 100%; border: 1px solid #eadfce; background: #fff7ea; color: var(--orange); border-radius: 8px; padding: 9px; font-weight: 600; font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; transition: 0.15s; } .wt-add:hover { background: var(--orange); color: #fff; border-color: var(--orange); } .wt-qty { display: inline-flex; align-items: center; border: 1px solid #e2e2e2; border-radius: 8px; overflow: hidden; } .wt-qty button { width: 34px; height: 38px; border: none; background: #f6f6f6; font-size: 18px; cursor: pointer; color: #333; } .wt-qty button:hover { background: var(--orange); color: #fff; } .wt-qty input { width: 44px; height: 38px; border: none; text-align: center; font-size: 15px; font-weight: 600; } .page-hero { background: #fff7ea; padding: 30px 0; border-bottom: 1px solid #f0e6d6; } .page-hero__inner { max-width: 100%; margin: 0 auto; padding: 0 48px; } .page-hero__title { font-family: "Poppins", sans-serif; font-weight: 800; font-size: 30px; color: var(--ink); margin: 0; } .breadcrumb { font-size: 13px; color: #8a8a8a; margin-bottom: 8px; } .breadcrumb a { color: #8a8a8a; text-decoration: none; } .breadcrumb a:hover { color: var(--orange); } .wt-wrap { max-width: 100%; margin: 0 auto; padding: 40px 48px 64px; } .shop { display: grid; grid-template-columns: 250px 1fr; gap: 34px; } .shop__side { align-self: start; } .shop__filter { border: 1px solid #eee; border-radius: 12px; padding: 18px 20px; margin-bottom: 18px; } .shop__filter h4 { font-family: "Poppins", sans-serif; font-size: 15px; margin: 0 0 12px; color: var(--ink); } .shop__filter label { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #555; padding: 5px 0; cursor: pointer; } .shop__bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; flex-wrap: wrap; gap: 12px; } .shop__count { color: #666; font-size: 14px; } .shop__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; } .shop__grid .fcard__box { border: 1px solid #eee; } .fcard__img { text-decoration: none; } .fcard__name { text-decoration: none; display: block; } .pdp { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; } .pdp__main { border: 1px solid #eee; border-radius: 16px; height: 460px; display: grid; place-items: center; background: #fff; } .pdp__main img { max-width: 78%; max-height: 78%; object-fit: contain; } .pdp__cat { display: inline-block; font-size: 13px; color: var(--orange); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .pdp__name { font-family: "Poppins", sans-serif; font-weight: 800; font-size: 30px; color: var(--ink); margin: 8px 0 12px; } .pdp__rating { display: flex; align-items: center; gap: 10px; color: #777; font-size: 14px; margin-bottom: 16px; } .pdp__price { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; } .pdp__now { font-size: 30px; font-weight: 800; color: var(--ink); } .pdp__was { color: #b0b0b0; text-decoration: line-through; font-size: 18px; } .pdp__off { background: #eaffea; color: #1a9d3a; font-size: 13px; font-weight: 700; padding: 3px 10px; border-radius: 6px; } .pdp__desc { color: #666; font-size: 15px; line-height: 1.7; margin-bottom: 22px; max-width: 520px; } .pdp__qtyrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; } .wt-buy { display: inline-flex; align-items: center; justify-content: center; margin-bottom: 22px; background: #1c1c1c; color: #fff; border-radius: 9px; padding: 12px 30px; font-weight: 600; text-decoration: none; } .wt-buy:hover { background: #000; } .pdp__meta { list-style: none; padding: 18px 0 0; margin: 0; border-top: 1px solid #eee; display: flex; flex-direction: column; gap: 10px; } .pdp__meta li { display: flex; align-items: center; gap: 10px; color: #555; font-size: 14px; } .pdp__meta i { color: var(--orange); width: 18px; } .sec-title { font-family: "Poppins", sans-serif; font-weight: 800; font-size: 22px; color: var(--ink); margin: 54px 0 22px; } .cart { display: grid; grid-template-columns: 1fr 340px; gap: 34px; align-items: start; } .cart-row { display: grid; grid-template-columns: 92px 1fr auto auto; gap: 18px; align-items: center; padding: 16px 0; border-bottom: 1px solid #eee; } .cart-row__img { width: 92px; height: 92px; border: 1px solid #eee; border-radius: 10px; display: grid; place-items: center; } .cart-row__img img { max-width: 80%; max-height: 80%; object-fit: contain; } .cart-row__name { font-family: "Poppins", sans-serif; font-weight: 700; font-size: 15px; color: var(--ink); text-decoration: none; display: block; } .cart-row__cat { display: block; font-size: 13px; color: #999; margin: 3px 0 8px; } .cart-row__rm { border: none; background: none; color: #c0392b; font-size: 13px; cursor: pointer; padding: 0; display: inline-flex; gap: 6px; align-items: center; } .cart-row__price { font-weight: 800; font-size: 17px; color: var(--ink); min-width: 70px; text-align: right; } .cart__summary, .co-summary { border: 1px solid #eee; border-radius: 14px; padding: 24px; align-self: start; } .cart__summary h3, .co-summary h3 { font-family: "Poppins", sans-serif; font-size: 18px; margin: 0 0 16px; color: var(--ink); } .sum-row { display: flex; justify-content: space-between; padding: 9px 0; font-size: 14px; color: #555; } .sum-row--total { border-top: 1px solid #eee; margin-top: 6px; padding-top: 14px; font-size: 18px; font-weight: 800; color: var(--ink); } .wt-empty { text-align: center; padding: 60px 20px; color: #888; } .wt-empty i { font-size: 46px; color: #ddd; margin-bottom: 16px; display: block; } .wt-empty p { font-size: 17px; margin: 0 0 18px; } .wt-success { text-align: center; padding: 60px 20px; } .wt-success i { font-size: 60px; color: #1a9d3a; margin-bottom: 16px; } .wt-success h2 { font-family: "Poppins", sans-serif; font-size: 26px; margin: 0 0 10px; color: var(--ink); } .wt-success p { color: #666; max-width: 460px; margin: 0 auto 20px; line-height: 1.6; } .co { display: grid; grid-template-columns: 1fr 380px; gap: 40px; align-items: start; } .wt-form { display: grid; gap: 16px; } .wt-field { display: flex; flex-direction: column; gap: 6px; } .wt-field label { font-size: 13px; font-weight: 600; color: #444; } .wt-field input, .wt-field select, .wt-field textarea { border: 1px solid #e0e0e0; border-radius: 9px; padding: 12px 14px; font-family: inherit; font-size: 14px; background: #fff; } .wt-field input:focus, .wt-field select:focus, .wt-field textarea:focus { outline: none; border-color: var(--orange); } .wt-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .co-item { display: grid; grid-template-columns: 46px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid #f0f0f0; font-size: 14px; } .co-item img { width: 46px; height: 46px; object-fit: contain; border: 1px solid #eee; border-radius: 8px; } .co-item__name em { color: #999; font-style: normal; } .wt-card { border: 1px solid #eee; border-radius: 14px; padding: 28px; } .auth { max-width: 440px; margin: 0 auto; } .auth__tabs { display: flex; gap: 8px; margin-bottom: 22px; } .auth__tabs button { flex: 1; padding: 12px; border: 1px solid #e6e6e6; background: #fafafa; border-radius: 9px; font-weight: 600; cursor: pointer; color: #666; } .auth__tabs button.is-active { background: var(--orange); color: #fff; border-color: var(--orange); } .auth__msg, .contact__msg { color: #1a9d3a; font-size: 14px; font-weight: 600; min-height: 18px; } .track-result { display: none; margin-top: 20px; border: 1px solid #eee; border-radius: 12px; padding: 20px; } .track-steps { display: flex; justify-content: space-between; margin-top: 18px; position: relative; } .track-steps::before { content: ""; position: absolute; top: 15px; left: 6%; right: 6%; height: 3px; background: #eee; } .track-step { position: relative; text-align: center; flex: 1; font-size: 12px; color: #888; } .track-step i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #eee; color: #999; margin: 0 auto 8px; position: relative; z-index: 1; } .track-step.done i { background: var(--orange); color: #fff; } .track-step.done { color: var(--ink); font-weight: 600; } .content h2 { font-family: "Poppins", sans-serif; font-size: 22px; color: var(--ink); margin: 28px 0 10px; } .content p, .content li { color: #555; font-size: 15px; line-height: 1.8; } .content ul { padding-left: 20px; } .content { max-width: 900px; } .jrow { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; margin: 40px 0; } .jrow img { width: 100%; border-radius: 16px; } .jrow h2 { font-family: "Poppins", sans-serif; font-size: 24px; color: var(--ink); margin: 0 0 12px; } .jrow p { color: #666; line-height: 1.8; } .jstats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 40px 0; text-align: center; } .jstat { border: 1px solid #eee; border-radius: 14px; padding: 26px 12px; } .jstat b { display: block; font-family: "Poppins", sans-serif; font-size: 30px; color: var(--orange); } .jstat span { color: #777; font-size: 14px; } @media (max-width: 1100px) { .shop { grid-template-columns: 1fr; } .shop__grid { grid-template-columns: repeat(3, 1fr); } .pdp, .cart, .co, .jrow { grid-template-columns: 1fr; } .jstats { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 760px) { .wt-wrap, .page-hero__inner { padding-left: 20px; padding-right: 20px; } .shop__grid { grid-template-columns: repeat(2, 1fr); } .cart-row { grid-template-columns: 70px 1fr; grid-auto-rows: auto; } } /* Pet Solution Finder → problems archive summary. */ .pp-finder-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 20px; padding: 13px 18px; background: #fff7f2; border: 1px solid #ffd9c2; border-radius: 12px; font-size: 14px; } .pp-finder-summary__lead { font-weight: 700; color: #d4531f; display: inline-flex; align-items: center; gap: 8px; } .pp-finder-summary__chip { padding: 3px 12px; background: #fff; border: 1px solid #ffd0b6; border-radius: 20px; font-weight: 600; color: #7a4a33; font-size: 13px; } .pp-finder-summary__hint { width: 100%; color: #8a8a8a; font-size: 12.5px; margin-top: 2px; }