/* Pet dosing slider (Ollie's MasterPets design, C:\Projects\MasterPets, 24 Sep 2026), placed on the product page
   13 Oct 2026. Everything is scoped under .pv2-petdose so nothing else on the page changes. */
.pv2-petdose {
    --pd-teal: #3EA7C2; --pd-teal-deep: #22758E; --pd-teal-wash: #EAF6F9; --pd-teal-wash-2: #D6EEF4;
    --pd-honey: #F2A65A; --pd-honey-soft: #FFF1E0; --pd-ink: #1F2A2E; --pd-ink-2: #4A5A60; --pd-line: #DDE7EA;
    background: linear-gradient(180deg, #fff 0%, var(--pd-teal-wash) 100%) !important;
}
.pv2-petdose .pd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: stretch; max-width: 1200px; margin: 0 auto; text-align: left; }
.pv2-petdose .pd-calc { background: #fff; border: 1px solid var(--pd-line); border-radius: 24px; padding: 32px; box-shadow: 0 12px 32px rgba(20,33,31,.10); display: flex; flex-direction: column; justify-content: space-between; gap: 22px; }
.pv2-petdose .pd-calc label { font-family: Montserrat, sans-serif; font-weight: 700; font-size: 16px; color: var(--pd-ink); display: flex; justify-content: space-between; margin: 0 0 10px; }
.pv2-petdose .pd-calc input[type=range] { width: 100%; accent-color: var(--pd-teal); margin: 0; }
.pv2-petdose .pd-result { display: grid; grid-template-columns: auto minmax(0, 260px); justify-content: center; gap: 26px; align-items: center; }
.pv2-petdose .pd-big { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; min-width: 150px; }
.pv2-petdose .pd-big output { font-family: Montserrat, sans-serif; font-size: 104px; font-weight: 800; line-height: 1; color: var(--pd-teal-deep); font-variant-numeric: tabular-nums; }
.pv2-petdose .pd-big span { font-weight: 700; color: var(--pd-ink-2); font-size: 17px; line-height: 1.3; }
.pv2-petdose .pd-pet { position: relative; margin: 0; aspect-ratio: 1/1; border-radius: 18px; overflow: hidden; background: var(--pd-teal-wash); box-shadow: 0 14px 30px rgba(20,60,75,.22); }
.pv2-petdose .pd-pet img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s ease; }
.pv2-petdose .pd-pet img.on { opacity: 1; }
.pv2-petdose .pd-pet figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 16px 12px; background: linear-gradient(180deg, rgba(14,48,60,0) 0%, rgba(14,48,60,.88) 100%); color: #fff; display: flex; justify-content: space-between; align-items: flex-end; gap: 8px; }
.pv2-petdose .pd-pet figcaption b { font-family: Fredoka, Nunito, sans-serif; font-weight: 700; font-size: 30px; line-height: 1; letter-spacing: .01em; color: #FFE9B8; text-shadow: 0 2px 10px rgba(0,0,0,.35); }
.pv2-petdose .pd-pet figcaption span { font-family: Fredoka, Nunito, sans-serif; font-size: 15px; font-weight: 600; color: #fff; background: rgba(62,167,194,.85); padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.pv2-petdose .pd-drops { display: flex; gap: 10px; height: 44px; align-items: end; }
.pv2-petdose .pd-drops i { display: block; width: 32px; height: 40px; border-radius: 50% 50% 50% 50%/60% 60% 40% 40%; background: var(--pd-teal-wash-2); transform: rotate(180deg); transition: background .2s; }
.pv2-petdose .pd-drops i.on { background: var(--pd-teal); }
.pv2-petdose .pd-note { position: relative; font-size: 19px; line-height: 1.5; font-weight: 600; color: #2B1A08; background: linear-gradient(135deg, #FFE3B8 0%, #FFD08A 100%); border-radius: 16px; padding: 22px 24px 22px 28px; border: 2px solid #F2A65A; border-left-width: 8px; box-shadow: 0 10px 24px rgba(242,166,90,.35); }
.pv2-petdose .pd-note b { font-weight: 900; color: #B4520A; }
.pv2-petdose .pd-tag { display: inline-flex; align-items: center; gap: 8px; font-family: Montserrat, sans-serif; font-weight: 900; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: #fff; background: #D9731B; border-radius: 999px; padding: 6px 14px; margin-bottom: 12px; }
.pv2-petdose .pd-tag svg { width: 16px; height: 16px; }
.pv2-petdose table.pd-table { width: 100%; border-collapse: collapse; table-layout: fixed; background: #fff; border-radius: 20px; overflow: hidden; border: 1px solid var(--pd-line); font-size: 18px; margin: 0; }
.pv2-petdose .pd-table th, .pv2-petdose .pd-table td { padding: 20px 22px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--pd-line); color: var(--pd-ink-2); }
.pv2-petdose .pd-table tr:last-child td { border-bottom: 0; }
.pv2-petdose .pd-table th { background: var(--pd-teal-wash); font-family: Montserrat, sans-serif; font-size: 14px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--pd-teal-deep); padding: 18px 16px; line-height: 1.25; }
.pv2-petdose .pd-table th:first-child, .pv2-petdose .pd-table td:first-child { width: 30%; font-weight: 600; color: var(--pd-ink); white-space: nowrap; }
.pv2-petdose .pd-table th:nth-child(2), .pv2-petdose .pd-table td:nth-child(2) { width: 47%; }
.pv2-petdose .pd-table th:last-child, .pv2-petdose .pd-table td:last-child { width: 23%; text-align: center; }
.pv2-petdose .pd-table td:last-child { font-family: Montserrat, sans-serif; font-size: 24px; font-weight: 800; color: var(--pd-teal-deep); }
.pv2-petdose .pd-table td .pd-ex { display: block; color: var(--pd-ink-2); font-size: 15px; font-weight: 400; margin-top: 3px; line-height: 1.4; }
.pv2-petdose .pd-table tbody tr:nth-child(even) td { background: #FBFDFE; }
.pv2-petdose .pd-table tbody tr.hit td { background: var(--pd-honey-soft) !important; box-shadow: inset 4px 0 0 var(--pd-honey); }
.pv2-petdose .pd-table tbody tr.hit td:last-child { color: #B4520A; }
.pv2-petdose .pd-rules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 22px; }
.pv2-petdose .pd-rules div { background: #fff; border: 1px solid var(--pd-line); border-radius: 14px; padding: 16px; font-size: 14px; line-height: 1.5; color: var(--pd-ink-2); }
.pv2-petdose .pd-rules b { display: block; color: var(--pd-ink); font-family: Montserrat, sans-serif; font-size: 15px; margin-bottom: 4px; }
/* one column on tablets (iPad, Paul 14 Oct): the card and the table in one centred column, the card no longer stretched */
@media (max-width: 1280px) {
    .pv2-petdose .pd-grid { grid-template-columns: 1fr; max-width: 680px; }
    .pv2-petdose .pd-calc { justify-content: flex-start; }
}
@media (max-width: 640px) {
    .pv2-petdose .pd-calc { padding: 22px 18px; justify-content: flex-start; }
    .pv2-petdose .pd-big output { font-size: 64px; }
    .pv2-petdose .pd-result { gap: 16px; }
    .pv2-petdose .pd-big { min-width: 110px; }
    .pv2-petdose .pd-big span { font-size: 14px; }
    .pv2-petdose .pd-pet figcaption { padding: 26px 12px 10px; }
    .pv2-petdose .pd-pet figcaption b { font-size: 22px; }
    .pv2-petdose .pd-pet figcaption span { font-size: 12px; padding: 3px 8px; }
    .pv2-petdose table.pd-table { font-size: 15px; }
    .pv2-petdose .pd-table th, .pv2-petdose .pd-table td { padding: 14px 12px; }
    .pv2-petdose .pd-table th { font-size: 12px; letter-spacing: .03em; }
    .pv2-petdose .pd-table th:first-child, .pv2-petdose .pd-table td:first-child { width: 30%; white-space: normal; }
    .pv2-petdose .pd-table th:nth-child(2), .pv2-petdose .pd-table td:nth-child(2) { width: 52%; }
    .pv2-petdose .pd-table th:last-child, .pv2-petdose .pd-table td:last-child { width: 18%; }
    .pv2-petdose .pd-table td:last-child { font-size: 20px; }
    .pv2-petdose .pd-table td .pd-ex { font-size: 13px; }
    .pv2-petdose .pd-note { font-size: 17px; padding: 18px 18px 18px 22px; }
    .pv2-petdose .pd-rules { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .pv2-petdose * { transition: none !important; } }
@media (max-width: 400px) {
    .pv2-petdose .pd-table td:first-child { font-size: 13px; white-space: nowrap; }
    .pv2-petdose .pd-table th:first-child, .pv2-petdose .pd-table td:first-child { width: 31%; }
    .pv2-petdose .pd-table th, .pv2-petdose .pd-table td { padding: 12px 8px; }
}