/* Local campaign: restrained feedback, no change to layout or content access. */
.btn{transition:background-color .24s ease,border-color .24s ease,transform .24s cubic-bezier(.22,1,.36,1)}
.btn:hover{transform:none}
.btn:active{transform:scale(.992);transition-duration:.1s}
/* Neutral category tiles; every content tier shares the same left rail. */
.category{background:#f7f7f7;border-color:#ddd;transition:background-color .24s ease,border-color .24s ease}
.category .product-icon{color:#454545;stroke-width:2.25;overflow:visible}
.category .brandline{color:#656565;letter-spacing:.08em}
.category p{color:#606060}
.category:hover{transform:none;box-shadow:none}
.category{display:grid;grid-template-rows:auto 1fr auto;row-gap:14px;align-content:start;align-self:stretch;min-height:190px;padding:24px}
.category>.category-content{display:contents}
.category-heading{display:flex;align-items:center;gap:12px;min-width:0;font-size:1.3rem}
.category-heading>.product-icon{width:1em;height:1em;flex:0 0 1em}
.category p{margin:0;align-self:start}
.category h3{min-width:0;font-size:1.3rem;font-weight:700;line-height:1.2}
.category .go{margin-top:14px;align-self:end;justify-self:start}
.category .go{display:inline-flex;align-items:center;gap:8px;max-width:100%;font-size:.9rem;font-weight:700;line-height:1.4}
.partner-card .partner-cta{margin-top:18px;display:inline-flex;align-items:center;align-self:flex-start;gap:7px;max-width:100%;line-height:1.4;font-weight:880;text-decoration:none}
.category-cta-text{position:relative;min-width:0}
.category-cta-text::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;opacity:.35;transform:scaleX(0);transform-origin:left;transition:transform .26s cubic-bezier(.22,1,.36,1)}
.category-cta-arrow{width:18px;height:18px;flex:0 0 18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .26s cubic-bezier(.22,1,.36,1)}
.category:focus-visible .category-cta-text::after,.partner-card:focus-visible .category-cta-text::after{transform:scaleX(1)}
@supports(grid-template-rows:subgrid){
  /* Each row of cards shares tracks for icon/title, copy and CTA. */
  .category{grid-template-rows:subgrid;grid-row:span 3}
}
.price-card{transition:border-color .38s ease,box-shadow .38s ease}
.price-card summary::after{transition:transform .22s cubic-bezier(.22,1,.36,1),color .22s ease}
.price-card details.motion-details.is-expanded summary::after{transform:rotate(225deg)}
.price-card details.motion-details:not(.is-expanded) summary::after{transform:rotate(45deg)}
.price-card details{margin-top:0}
.price-card details+.included-copy{margin-top:0}
.price-card .spec-row,.price-card summary{min-height:44px;line-height:1.55}
.price-card div.spec-row{display:grid;grid-template-columns:minmax(0,1fr) fit-content(60%);column-gap:12px;padding:9px 0 9px 22px}
.price-card summary{display:grid;grid-template-columns:10px minmax(0,1fr) fit-content(60%);column-gap:12px;justify-content:normal;padding:9px 0;transition:color .22s ease,text-shadow .22s ease}
.price-card summary::after{grid-column:1;grid-row:1;align-self:center;margin:0;width:6px;height:6px;color:#8d9393}
.price-card summary>span{grid-column:2;grid-row:1;min-width:0}
.price-card summary>span:only-child{grid-column:2 / -1}
.price-card .spec-row>strong{font:inherit;letter-spacing:inherit;color:#fff;text-align:right}
.price-card summary.spec-row>strong{grid-column:3;grid-row:1;min-width:0;color:#d9ddd6;text-align:right;transition:color .22s ease,text-shadow .22s ease}
.price-card .details-copy{margin-top:0;padding:3px 0 12px 22px}
.price-card .details-copy p+h4{margin-top:14px}
/* Optional simpler configurations follow the included equipment, before the price. */
.price-card details.price-options{margin-top:10px}
.price-card .price-options>summary{display:flex;justify-content:flex-start;gap:8px;border-top:0;font-weight:600}
.price-card details.price-options>summary::after{width:8px;height:6px;margin:0;border:0;background:currentColor;clip-path:polygon(0 0,100% 0,50% 100%);color:inherit;transform:none}
.price-card details.price-options[open]>summary::after,.price-card details.price-options.is-expanded>summary::after{transform:rotate(180deg)}
.price-card details.price-options.motion-details:not(.is-expanded)>summary::after{transform:none}
.price-card .price-options .details-copy{padding:3px 0 12px}
.campaign-details-body{display:flow-root}
.campaign-details-body.is-moving{overflow:hidden}
.faq-list details.motion-details summary::after{content:'+';transition:transform .22s cubic-bezier(.22,1,.36,1)}
.faq-list details.motion-details.is-expanded summary::after{content:'+';transform:rotate(45deg)}

/* Replace Safari's dark tap flash with a restrained response on touch screens. */
.faq-list summary,.price-card summary{-webkit-tap-highlight-color:transparent}
@media(hover:none){
  .faq-list summary,.price-card summary{transition:background-color .12s ease}
  .faq-list summary:active{background-color:rgba(0,0,0,.035)}
  .price-card summary:active{background-color:rgba(255,255,255,.045)}
}

@media(hover:hover) and (pointer:fine){
  .btn-primary:hover{background:#262626}
  .price-card .btn:hover{background:#e7e7e7}
  .price-card:hover{border-color:#505455;box-shadow:0 5px 16px rgba(0,0,0,.18)}
  .category:hover{background:#f0f0f0;border-color:#c6c6c6}
  .category:hover .category-cta-arrow{transform:translateX(3px)}
  .category:hover .category-cta-text::after{transform:scaleX(1)}
  .partner-card:hover{background:#f5f5f4;border-color:#c7c7c5}
  .partner-card:hover .category-cta-arrow{transform:translateX(3px)}
  .partner-card:hover .category-cta-text::after{transform:scaleX(1)}
  .price-card summary:hover{color:#fff;text-shadow:0 0 8px rgba(255,255,255,.2)}
  .price-card summary.spec-row:hover>strong{color:#fff;text-shadow:0 0 8px rgba(255,255,255,.2)}
  .price-card summary:hover::after{color:#afb5b2}
}

@media(prefers-reduced-motion:reduce){
  .btn,.category,.category-cta-arrow,.category-cta-text::after,.price-card,.price-card summary,.price-card summary.spec-row>strong,.price-card summary::after,.faq-list details.motion-details summary::after{transition:none}
  .category:hover .category-cta-arrow,.partner-card:hover .category-cta-arrow{transform:none}
  .btn:active{transform:none}
}

/* Dots sit in the gaps; clipping removes them at every wrapped line start. */
.separated-inline{display:inline-flex;flex-wrap:wrap;align-items:baseline;column-gap:.9em;max-width:100%;overflow:hidden;vertical-align:bottom}
.separated-inline>span{position:relative;flex:0 1 auto;min-width:0;max-width:100%}
.separated-inline>span+span::before{content:'·';position:absolute;left:-.6em;top:0;width:.3em;text-align:center;letter-spacing:0}
.seller-identity>span+span::before{content:'–';left:-.75em;width:.6em}
.footer-bottom .seller-identity{row-gap:2px}
.footer-bottom .seller-identity>span+span{flex:0 0 auto;white-space:nowrap}
/* Guard against injected iOS number links inheriting the footer's block-link layout. */
.footer-bottom .seller-identity a[x-apple-data-detectors]{display:inline;margin:0;color:inherit;font:inherit;text-decoration:none}

.partner-card{text-decoration:none;cursor:pointer;transition:background-color .3s ease,border-color .3s ease}
.partner-card:focus-within{background:#f5f5f4;border-color:#c7c7c5}
.partner-card:focus-within .category-cta-text::after{transform:scaleX(1)}
.price-media>.bestseller-badge{left:clamp(10px,1.4vw,16px);right:auto;text-align:left}
@media(max-width:430px){.price-media>.bestseller-badge{left:8px}}
@media(max-width:360px){.price-media>.bestseller-badge{left:7px}}
@media(prefers-reduced-motion:reduce){.partner-card{transition:none}}

/* One compact information panel per product photo, with a separate bestseller. */
.price-media .badge-stack,.hero-media .campaign-panel{
  background:#121212;
  backdrop-filter:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 4px 12px rgba(0,0,0,.18);
}
.hero-media .campaign-panel .label{color:#dededb}
/* Quiet tonal feedback; the panel stays still and only its terms link is clickable. */
.hero-media .campaign-panel{cursor:default;transition:background-color .4s ease,box-shadow .4s ease}
.hero-media .campaign-panel a{cursor:pointer}
@media(hover:hover) and (pointer:fine){
  .hero-media .campaign-panel:hover{background:#191917;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 4px 12px rgba(0,0,0,.18)}
}
@media(prefers-reduced-motion:reduce){.hero-media .campaign-panel{transition:none}}
.price-media{container:product-image / inline-size}
.price-media .reference-badge{padding:6px 9px;border-radius:11px;max-width:56%;-webkit-text-size-adjust:100%;text-size-adjust:100%}
.price-media .badge-stack{width:max-content;max-width:52%;padding:8px 10px;border-radius:11px;align-items:stretch;gap:0;text-align:left;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),0 3px 10px rgba(0,0,0,.14)}
.price-media .badge-stack>.reference-badge{position:static;width:auto;max-width:100%;padding:0;border-radius:0;background:none;box-shadow:none;text-align:left;backdrop-filter:none}
.price-media .badge-stack>.reference-badge+.reference-badge{margin-top:7px;padding-top:7px;border-top:1px solid rgba(255,255,255,.1)}
.price-media .reference-badge span{font-size:.6875rem;line-height:1.2;letter-spacing:.055em}
.price-media .badge-stack .badge-label{color:#b3b5b1;font-weight:400;font-size:.6875rem;line-height:1.25;letter-spacing:.015em;text-transform:uppercase;overflow-wrap:normal}
.price-media .badge-stack>.reference-badge>strong,
.price-media .badge-stack>.reference-badge>.badge-subline{font-family:inherit;color:#fff;font-size:.8125rem;font-weight:600;line-height:1.25;letter-spacing:-.01em;text-transform:none;margin-top:3px;overflow-wrap:normal}
.price-media .badge-stack>.reference-badge>strong:first-child{margin-top:0}
.price-media .reference-badge.bestseller-badge{max-width:40%}
.price-media .reference-badge.bestseller-badge span{font-size:.75rem;line-height:1.2;letter-spacing:.015em;gap:4px}
.price-media .bestseller-star{width:11px;height:11px}
@container product-image (max-width:300px){
  .price-media .reference-badge,.price-media .badge-stack{padding:5px 7px;border-radius:9px}
  .price-media .badge-stack{padding:7px 8px}
  .price-media .badge-stack>.reference-badge+.reference-badge{margin-top:6px;padding-top:6px}
  .price-media .reference-badge span,.price-media .badge-stack .badge-label{font-size:.625rem}
  .price-media .badge-stack>.reference-badge>strong,.price-media .badge-stack>.reference-badge>.badge-subline{font-size:.75rem}
  .price-media .reference-badge.bestseller-badge span{font-size:.6875rem}
}

/* Prevent short trailing lines and keep long questions easy to scan. */
main p{ text-wrap:pretty }
.cred-copy#drutex-info{scroll-margin-top:24px}
.faq-list summary{font-weight:400;letter-spacing:0;line-height:1.5;text-wrap:pretty}
.faq-list summary::after{flex:0 0 18px;align-self:center;text-align:center}

.partner-card:focus-visible{outline:2px solid #52705c;outline-offset:3px;box-shadow:none;border-radius:24px}
.prices .price-note{max-width:86ch;margin:20px auto 0;font-size:.88rem;text-align:center;text-wrap:balance}

.signal-grid .signal{cursor:default;transition:background-color .45s ease}
@media(hover:hover) and (pointer:fine){.signal-grid .signal:hover{background-color:rgba(80,72,56,.022)}}
@media(prefers-reduced-motion:reduce){.signal-grid .signal{transition:none}}

/* White manufacturer mark over each photograph, without a panel or backdrop. */
.cred-image{position:relative;isolation:isolate}
.hero-media>img.drutex-photo-logo,.cred-image>img.drutex-photo-logo{
  position:absolute;inset:auto;left:clamp(20px,2.4vw,32px);bottom:clamp(20px,2.4vw,32px);
  width:clamp(140px,15vw,190px);height:auto;object-fit:contain;object-position:center;
  z-index:2;pointer-events:none;
}

/* Balance the service introduction at every width, keeping its final phrase together. */
.local-service .section-head .lead{text-wrap:balance}

/* Feedback on a phone tap is a brief change of tone, with a small arrow response. */
.category:active,.partner-card:active{background:#ececea;border-color:#c5c5c5;transition-duration:.12s}
.partner-card:active{background:#ececec}
.category:active .category-cta-arrow,.partner-card:active .category-cta-arrow{transform:translateX(2px);transition-duration:.12s}

@media(max-width:680px){
}
@media(prefers-reduced-motion:reduce){
  .category:active .category-cta-arrow,.partner-card:active .category-cta-arrow{transform:none}.category:active,.partner-card:active{transition:none}
}

/* FAQ text and its disclosure mark share one tonal response. */
.faq-list summary{transition:color .24s ease}
.faq-list summary::after{color:inherit}
.price-media .badge-stack{cursor:default;transition:background-color .36s ease,box-shadow .36s ease}
@media(hover:hover) and (pointer:fine){
  .faq-list summary:hover{color:#414540}
  .price-media .badge-stack:hover{background:#181818;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 4px 12px rgba(0,0,0,.17)}
}
@media(prefers-reduced-motion:reduce){
  .faq-list summary,.price-media .badge-stack{transition:none}
}

/* Keep the partner pair compact when it moves below the service panel. */
@media(min-width:681px) and (max-width:1040px){
  .local-service .partner-stack{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Editorial breaks only apply to the wide layout. */
@media(min-width:1041px){
  .wide-line-start{display:block}
  #how .section-head .lead,#delivery .section-head .lead{max-width:none}
}