.ph-cmp-sr{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}

/* Product page text toggle */
.ph-cmp-link{align-items:center;background:none;border:0;color:var(--ph-green);cursor:pointer;display:inline-flex;font-family:Manrope,sans-serif;font-size:16px;font-weight:500;gap:10px;line-height:1.3;min-height:40px;padding:0}
.ph-cmp-link svg{border:1px solid var(--ph-green);border-radius:50%;box-sizing:border-box;flex:none;height:40px;padding:10px;transition:background-color .3s ease,border-color .3s ease,color .3s ease;width:40px}
.ph-cmp-link[aria-pressed="true"] svg{background:var(--ph-green);color:var(--ph-cream)}
/* The PDP stretches the button to half the row; ring the icon, not the whole box */
.ph-cmp-link:focus,.ph-cmp-link:focus-visible{outline:none}
.ph-cmp-link:focus-visible svg{outline:2px solid var(--ph-green);outline-offset:2px}

/* Floating counter */
html .ph-cmp-float{align-items:center;background:var(--ph-cream);border:1px solid var(--ph-green);border-radius:26px;bottom:20px;box-shadow:var(--ph-shadow);color:var(--ph-green);cursor:pointer;display:inline-flex;font-family:Manrope,sans-serif;font-size:15px;font-weight:700;gap:8px;height:52px;line-height:1;margin:0;padding:0 18px 0 14px;position:fixed;right:max(16px,env(safe-area-inset-right,0px));text-transform:none;transition:opacity .2s var(--ease-out),transform .2s var(--ease-out),display .2s allow-discrete,background-color .2s ease,color .2s ease;z-index:9}
html .ph-cmp-float[hidden]{display:none;opacity:0;transform:translateY(8px) scale(.96)}
@starting-style{html .ph-cmp-float{opacity:0;transform:translateY(8px) scale(.96)}}
.ph-cmp-float svg{height:20px;width:20px}
.ph-cmp-float__count{background:var(--ph-brown);border-radius:11px;color:#fff;display:grid;font-size:12px;font-variant-numeric:tabular-nums;height:22px;min-width:22px;padding:0 6px;place-items:center}
.ph-cmp-float:focus-visible{outline:2px solid var(--ph-green);outline-offset:3px}
body:has(.remove-cart-shadow.show) .ph-cmp-float{visibility:hidden}
body:has(.sticky-product.sticky) .ph-cmp-float{bottom:135px}
@media (min-width:768px){html .ph-cmp-float{right:30px}}

/* Toast */
.ph-cmp-toast{align-items:center;background:var(--ph-green);border-radius:12px;bottom:calc(88px + env(safe-area-inset-bottom,0px));box-shadow:var(--ph-shadow-lg);color:var(--ph-cream);display:flex;font-family:Manrope,sans-serif;gap:12px;left:50%;opacity:0;padding:12px 14px 12px 16px;pointer-events:none;position:fixed;transform:translate(-50%,12px);transition:opacity .2s var(--ease-out),transform .2s var(--ease-out),visibility 0s linear .2s;visibility:hidden;width:min(440px,calc(100% - 32px));z-index:12}
@media (min-width:1024px){.ph-cmp-toast{bottom:24px}body:has(.sticky-product.sticky) .ph-cmp-toast{bottom:135px}}
.ph-cmp-toast.is-on{opacity:1;pointer-events:auto;transform:translate(-50%,0);transition:opacity .2s var(--ease-out),transform .2s var(--ease-out),visibility 0s;visibility:visible}
.ph-cmp-toast__text{flex:1;line-height:1.3;margin:0;min-width:0}
.ph-cmp-toast__text b{display:block;font-size:14px;font-weight:700}
.ph-cmp-toast__text span{display:block;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ph-cmp-toast__go{background:none;border:0;color:var(--ph-peach);cursor:pointer;font-family:inherit;font-size:14px;font-weight:700;padding:8px 0;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.ph-cmp-toast__go:focus-visible{outline:2px solid var(--ph-cream);outline-offset:2px}

/* Dialog */
html:has(dialog.ph-cmp-dialog[open]){overflow:hidden}
dialog.ph-cmp-dialog{background:var(--ph-cream);border:0;border-radius:16px 16px 0 0;box-shadow:var(--ph-shadow-lg);color:var(--ph-ink);font-family:Manrope,sans-serif;font-size:15px;height:calc(100dvh - 12px);line-height:1.45;margin:auto auto 0;max-height:none;max-width:100%;opacity:0;overflow:hidden;padding:0;transform:translateY(24px);transition:opacity .26s var(--ease-out),transform .26s var(--ease-out),overlay .26s var(--ease-out) allow-discrete,display .26s var(--ease-out) allow-discrete;width:100%}
dialog.ph-cmp-dialog:not([open]){display:none}
dialog.ph-cmp-dialog[open]{display:flex;flex-direction:column;opacity:1;transform:none}
@starting-style{dialog.ph-cmp-dialog[open]{opacity:0;transform:translateY(24px)}}
dialog.ph-cmp-dialog::backdrop{background:rgba(10,59,48,.45);opacity:0;transition:opacity .26s var(--ease-out),overlay .26s var(--ease-out) allow-discrete,display .26s var(--ease-out) allow-discrete}
dialog.ph-cmp-dialog[open]::backdrop{opacity:1}
@starting-style{dialog.ph-cmp-dialog[open]::backdrop{opacity:0}}
dialog.ph-cmp-dialog *{box-sizing:border-box}
.ph-cmp-dialog :focus-visible{outline:2px solid var(--ph-green);outline-offset:2px}

.ph-cmp-head{align-items:center;border-bottom:1px solid var(--ph-beige);display:flex;flex:none;gap:12px;justify-content:space-between;padding:14px max(16px,env(safe-area-inset-right,0px)) 10px max(16px,env(safe-area-inset-left,0px))}
.ph-cmp-tools{align-items:center;display:flex;flex-wrap:wrap;gap:8px 12px;min-width:0}
.ph-cmp-dialog .ph-cmp-title{color:var(--ph-green);font-family:Manrope,sans-serif;font-size:20px;font-weight:700;line-height:1.3;margin:0}
.ph-cmp-note{align-items:center;background:var(--ph-green);border-radius:25px;color:var(--ph-cream);display:none;font-size:13.5px;font-weight:600;gap:10px;line-height:1.3;margin:0;padding:6px 8px 6px 14px}
.ph-cmp-note.is-on{display:inline-flex}
.ph-cmp-note__cart{background:var(--ph-cream);border:0;border-radius:25px;color:var(--ph-green);cursor:pointer;font-family:inherit;font-size:13px;font-weight:700;min-height:32px;padding:0 12px;white-space:nowrap}
.ph-cmp-note__cart[hidden]{display:none}
.ph-cmp-close{background:var(--ph-off);border:1px solid var(--ph-sand);border-radius:50%;color:var(--ph-green);cursor:pointer;display:grid;flex:none;height:44px;padding:0;place-items:center;width:44px}

.ph-cmp-body{display:flex;flex:1;flex-direction:column;gap:10px;min-height:0;padding:14px max(16px,env(safe-area-inset-right,0px)) 12px max(16px,env(safe-area-inset-left,0px))}

/* Table: head row and label column stay pinned while the table scrolls inside the modal */
.ph-cmp-scroll{background:var(--ph-off);border-radius:10px;box-shadow:var(--ph-shadow);container-type:inline-size;flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
.ph-cmp-table{border-collapse:separate;border-spacing:0;font-size:14.5px;margin:0;min-width:calc(96px + var(--ph-cmp-cols,2) * (100vw - 128px) / 2);table-layout:fixed;width:100%}
.ph-cmp-table th,.ph-cmp-table td{border:0;border-bottom:1px solid var(--ph-beige);padding:8px 12px;text-align:left;vertical-align:top}
.ph-cmp-table thead th{background:var(--ph-off)!important;box-shadow:0 1px 0 var(--ph-beige);color:var(--ph-ink);position:sticky;top:0;z-index:2}
.ph-cmp-table thead th.ph-cmp-corner{left:0;width:96px;z-index:3}
.ph-cmp-table tbody th{background:var(--ph-green);border-bottom-color:rgba(248,244,232,.12);border-right:3px solid var(--ph-brown);color:var(--ph-cream);font-size:13.5px;font-weight:600;hyphens:auto;left:0;line-height:1.3;overflow-wrap:anywhere;padding-inline:10px;position:sticky;white-space:normal;width:96px;z-index:1}
.ph-cmp-table td{background:var(--ph-off);color:var(--ph-ink)}
.ph-cmp-table tbody tr:nth-child(even) td{background:var(--ph-surface)}
.ph-cmp-table tbody tr.ph-cmp-grp th{background:var(--ph-cream);border-right:0;color:var(--ph-green);font-size:12px;font-weight:800;letter-spacing:.06em;padding-block:12px 6px;position:static;text-transform:uppercase}
.ph-cmp-table td.is-best{color:var(--ph-green);font-weight:700}
.ph-cmp-grp__in{align-items:center;display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:space-between;hyphens:manual;left:10px;max-width:calc(100cqi - 20px);overflow-wrap:normal;position:sticky}
.ph-cmp-table td.ph-cmp-addcell{background:var(--ph-off);border-bottom:0;padding:0;vertical-align:top}
.ph-cmp-addcell__in{display:none}
.ph-cmp-table .ph-price{color:var(--ph-brown);font-weight:700}
.ph-cmp-table .ph-price ins,.ph-cmp-item__price ins{order:-1}
.ph-cmp-table .ph-price del{font-size:13px}
.ph-cmp-table .ph-card__fast{white-space:nowrap}
.ph-cmp-table .ph-card__fast::before{content:"\00B7";margin-right:4px}
.ph-cmp-chip{background:var(--ph-green);border-radius:25px;color:var(--ph-cream);display:inline-block;font-size:11px;font-weight:700;line-height:1.3;margin-top:4px;padding:2px 8px}
.ph-cmp-table td .ph-cmp-chip{margin-left:6px}
.ph-cmp-table td .ph-price + .ph-cmp-chip{margin-left:0}
.ph-cmp-legend{color:var(--ph-muted);font-size:12.5px;line-height:1.4;margin:0}
.ph-cmp-table tr.is-same th{color:rgba(248,244,232,.8);font-weight:500}
.ph-cmp-table tr.is-same td{color:var(--ph-muted)}
.ph-cmp-merged__in{align-items:center;display:inline-flex;flex-wrap:wrap;gap:4px 8px;left:calc(var(--ph-cmp-label,96px) + 12px);position:sticky}
.ph-cmp-sametag{border:1px solid var(--ph-sand);border-radius:25px;color:var(--ph-muted);font-size:11.5px;font-weight:600;line-height:20px;padding:0 8px;white-space:nowrap}
.ph-cmp-table tr.is-diff td{color:var(--ph-ink);font-weight:600}

.ph-cmp-prod{align-items:center;display:grid;gap:6px 10px;grid-template-columns:minmax(0,1fr);position:relative}
.ph-cmp-pic{aspect-ratio:1;background:var(--ph-img);border-radius:8px;display:block;overflow:hidden;width:72px}
/* iOS Safari won't resolve height:100% against an aspect-ratio parent */
.ph-cmp-pic img,.ph-cmp-noimg{aspect-ratio:1;display:block;height:auto;object-fit:cover;width:100%}
.ph-cmp-name{color:var(--ph-ink);font-size:13.5px;font-weight:700;line-height:1.35;text-decoration:none}
.ph-cmp-name:hover{color:var(--ph-green)}
.ph-cmp-x{background:rgba(253,251,245,.92);border:0;border-radius:50%;box-shadow:var(--ph-shadow);color:var(--ph-green);cursor:pointer;display:grid;height:28px;padding:0;place-items:center;position:absolute;right:0;top:0;width:28px}
.ph-cmp-dialog .ph-cmp-cta{font-size:14px;grid-column:1/-1;line-height:1.2;min-height:38px;padding:0 16px;width:100%}
.ph-cmp-dialog .ph-btn.ph-cmp-cta{line-height:38px}
.ph-cmp-dialog .ph-btn-line.ph-cmp-cta{line-height:36px}
.ph-cmp-cta[disabled]{cursor:progress;opacity:.7}

.ph-cmp-add{align-content:start;border:2px dashed var(--ph-sand);border-radius:10px;display:grid;gap:8px;padding:8px}
.ph-cmp-add__title{color:var(--ph-green);font-size:14px;font-weight:700;margin:0}
.ph-cmp-col--add .ph-cmp-add{display:none}
.ph-cmp-addbtn{align-items:center;background:none;border:2px dashed var(--ph-sand);border-radius:10px;color:var(--ph-green);cursor:pointer;display:flex;flex-direction:column;font-family:inherit;font-size:13.5px;font-weight:700;gap:4px;justify-content:center;line-height:1.3;min-height:72px;padding:8px;transition:border-color .2s ease,background-color .2s ease;width:100%}
.ph-cmp-addbtn[aria-expanded="true"]{background:var(--ph-white);border-color:var(--ph-green)}
.ph-cmp-add--panel{background:var(--ph-off);border:0;box-shadow:var(--ph-shadow);flex:none;max-height:min(360px,45dvh);overflow:auto;overscroll-behavior:contain;padding:10px 12px 12px}
.ph-cmp-add__head{align-items:center;display:flex;gap:8px;justify-content:space-between}
.ph-cmp-add__close{background:none;border:0;border-radius:50%;color:var(--ph-green);cursor:pointer;display:grid;flex:none;height:40px;margin:-8px -8px -8px 0;padding:0;place-items:center;width:40px}
.ph-cmp-hint{color:var(--ph-muted);font-size:12.5px;font-weight:400;line-height:1.4;margin:0}
.ph-cmp-hint[hidden]{display:none}
.ph-cmp-search{display:block;margin:0;position:relative}
.ph-cmp-search svg{color:var(--ph-green);left:12px;pointer-events:none;position:absolute;top:50%;transform:translateY(-50%)}
.ph-cmp-dialog .ph-cmp-search input{appearance:none;background:rgba(229,222,200,.45);border:1px solid var(--ph-sand);border-radius:25px;color:var(--ph-green);font:600 14px Manrope,sans-serif;height:40px;margin:0;padding:0 12px 0 36px;width:100%}
/* Under 16px, iOS zooms the page on focus and stays zoomed */
@media (pointer:coarse){.ph-cmp-dialog .ph-cmp-search input{font-size:16px}}
.ph-cmp-search input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.ph-cmp-search input::placeholder{color:var(--ph-muted);font-weight:500;opacity:1}
.ph-cmp-dialog .ph-cmp-search input:focus{background:var(--ph-off);outline:2px solid var(--ph-green);outline-offset:0}
.ph-cmp-sugg{display:grid;gap:4px}
.ph-cmp-sugg__empty{color:var(--ph-muted);font-size:13px;font-weight:400;margin:0}
.ph-cmp-item{align-items:center;background:var(--ph-white);border:1px solid var(--ph-beige);border-radius:8px;color:var(--ph-ink);cursor:pointer;display:grid;font-family:inherit;font-size:13px;font-weight:600;gap:8px;grid-template-columns:36px minmax(0,1fr) auto;line-height:1.3;padding:3px 8px 3px 3px;text-align:left;transition:border-color .2s ease;width:100%}
.ph-cmp-item img,.ph-cmp-item .ph-cmp-noimg{background:var(--ph-img);border-radius:6px;height:36px;object-fit:cover;width:36px}
.ph-cmp-item__text{display:grid;min-width:0}
.ph-cmp-item__name,.ph-cmp-item__price{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ph-cmp-item__price{align-items:baseline;color:var(--ph-brown);display:flex;font-weight:700;gap:6px}
.ph-cmp-item__price del{color:var(--ph-muted);font-weight:400}
.ph-cmp-item__price ins{background:none;text-decoration:none}
.ph-cmp-item__plus{color:var(--ph-green);font-size:18px;font-weight:800}
.ph-cmp-tag{background:var(--ph-green);border-radius:25px;color:var(--ph-cream);font-size:11px;font-weight:700;justify-self:start;line-height:1.3;padding:1px 8px}

.ph-cmp-bar{align-items:center;display:flex;font-variant-numeric:tabular-nums;gap:8px}
.ph-cmp-bar__track{background:var(--ph-beige);border-radius:3px;flex:1;height:6px;overflow:hidden}
.ph-cmp-bar__track i{background:var(--ph-sand);border-radius:3px;display:block;height:100%}
.ph-cmp-bar b{font-weight:400;text-align:right;width:28px}
td.is-best .ph-cmp-bar b{font-weight:700}
td.is-best .ph-cmp-bar__track i{background:var(--ph-green)}
.ph-cmp-ring{display:block}
.ph-cmp-ring circle{fill:none;stroke-width:4}
.ph-cmp-ring .ph-cmp-ring__bg{fill:var(--ph-off);stroke:none}
.ph-cmp-ring .ph-cmp-ring__track{stroke:var(--ph-beige)}
.ph-cmp-ring .ph-cmp-ring__value{stroke:var(--ph-green);stroke-linecap:round}
.ph-cmp-ring text{fill:var(--ph-green);font:500 13px Manrope,sans-serif}
td.is-best .ph-cmp-ring text{font-weight:800}

.ph-cmp-empty,.ph-cmp-msg{align-self:center;background:var(--ph-off);border-radius:10px;box-shadow:var(--ph-shadow);display:grid;gap:12px;justify-items:center;margin:auto 0;max-width:520px;padding:32px 20px;text-align:center;width:100%}
.ph-cmp-empty h3{color:var(--ph-green);font-family:Manrope,sans-serif;font-size:22px;font-weight:700;line-height:1.3;margin:0}
.ph-cmp-empty p,.ph-cmp-msg p{color:var(--ph-muted);margin:0;max-width:44ch}
.ph-cmp-loading{align-items:center;display:flex;flex:1;justify-content:center}
.ph-cmp-loading i{animation:ph-cmp-spin .8s linear infinite;background:conic-gradient(var(--ph-green) 0 25%,var(--ph-beige) 0);border-radius:50%;height:36px;-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px));mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px));width:36px}
@keyframes ph-cmp-spin{to{transform:rotate(1turn)}}

/* Cart drawer: back to the comparison */
.ph-cmp-back{font-size:14px;gap:8px;line-height:38px;margin:10px 16px 0;min-height:40px;padding:0 16px}
.ph-cmp-back[hidden]{display:none}
.ph-cmp-back svg{flex:none;height:16px;width:16px}

@media (min-width:720px){
	dialog.ph-cmp-dialog{border-radius:16px;height:calc(100dvh - 48px);margin:auto;width:min(1400px,calc(100% - 48px))}
	.ph-cmp-table{min-width:calc(156px + var(--ph-cmp-cols,2) * 220px)}
	.ph-cmp-table thead th.ph-cmp-corner,.ph-cmp-table tbody th{width:156px}
	.ph-cmp-table{--ph-cmp-label:156px}
	.ph-cmp-prod{grid-template-columns:88px minmax(0,1fr);padding-right:30px}
	.ph-cmp-pic{grid-row:span 2;width:88px}
	.ph-cmp-dialog .ph-cmp-cta{grid-column:2;justify-self:start;width:auto}
	.ph-cmp-addbtn,.ph-cmp-body .ph-cmp-add--panel{display:none}
	.ph-cmp-col--add .ph-cmp-add{display:grid}
	.ph-cmp-addcell__in{align-content:start;display:grid;gap:8px;padding:10px 12px;position:sticky;top:var(--ph-cmp-head,106px)}
}

@media (hover:hover) and (pointer:fine){
	.ph-cmp-link:hover span{text-decoration:underline;text-underline-offset:3px}
	.ph-cmp-link:hover svg{background:var(--ph-brown);border-color:var(--ph-brown);color:var(--ph-white)}
	.ph-cmp-float:hover{background:var(--ph-green);color:var(--ph-cream)}
	.ph-cmp-item:hover,.ph-cmp-addbtn:hover{border-color:var(--ph-green)}
	.ph-cmp-x:hover,.ph-cmp-close:hover,.ph-cmp-add__close:hover{color:var(--ph-brown)}
}

@media (prefers-reduced-motion:reduce){
	html .ph-cmp-float,html .ph-cmp-float[hidden],dialog.ph-cmp-dialog{transform:none}
	.ph-cmp-toast,.ph-cmp-toast.is-on{transform:translate(-50%,0)}
	@starting-style{html .ph-cmp-float,dialog.ph-cmp-dialog[open]{transform:none}}
	.ph-cmp-loading i{animation:none}
}