/* ukt_diystrip 1.0.2 front CSS: Flow's snippet v1.1 Part 1 (sha256 e6df49d2...) plus the F1 focus ring room (Proof F1, Flow 21:40 BST: row padding) and, in 1.0.2, the row ring drawn above the tiles (Proof section 12 side note). All rules scoped to .ukt-diy. */
.ukt-diy{background:#f2f4f5;padding:30px 0 34px;margin:0;clear:both}
.ukt-diy *{box-sizing:border-box}
.ukt-diy__in{max-width:1170px;margin:0 auto;padding:0 15px;position:relative}
.ukt-diy__head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:4px 16px;margin:0 0 16px}
.ukt-diy__title{margin:0;font-size:30px;line-height:1;font-weight:800;text-transform:uppercase;color:#2d3e4a}
.ukt-diy__title em{font-style:normal;color:#7a8a2a} /* darker than brand lime #b1be2e so it passes 3:1 on #f2f4f5 */
.ukt-diy__sub{margin:0 0 2px;font-size:14px;color:#555}
.ukt-diy__all{margin:0 0 2px auto;font-size:14px;font-weight:700;color:#2d3e4a;text-decoration:underline}
.ukt-diy__all:focus-visible{outline:3px solid #2d3e4a;outline-offset:3px}
.ukt-diy__track{position:relative}
.ukt-diy__row{list-style:none;margin:0;padding:0 0 2px;display:flex;flex-wrap:nowrap;gap:16px;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.ukt-diy__row::-webkit-scrollbar{display:none}
/* F1: 9px of room inside the scroll row (3px outline + 6px halo), cancelled by a matching negative margin, so the tile focus ring is not clipped and nothing moves */
.ukt-diy__row{padding:9px 9px 11px;margin:-9px -9px -9px;scroll-padding-inline:9px}
.ukt-diy__row:focus-visible{outline:3px solid #2d3e4a;outline-offset:4px}
.ukt-diy__row:focus-visible{outline-offset:-5px} /* F1: the row box is now 9px bigger, so -5px keeps its ring where it was (4px outside the tiles) */
/* 1.0.2: the row ring is drawn by the track, on a layer above the tiles, so a tile scrolling past can never paint over its sides.
   Same look and place as the outline above: 3px #2d3e4a, its outer edge 2px inside the row box (= 4px outside the tiles).
   Absolutely placed and pointer-events:none: no layout shift, no added width. Browsers without :has() keep the outline above. */
@supports selector(:has(*)){
  .ukt-diy__row:focus-visible{outline:none}
  .ukt-diy__track:has(> .ukt-diy__row:focus-visible)::after{content:"";position:absolute;top:2px;bottom:2px;left:-7px;right:-7px;border:3px solid #2d3e4a;box-sizing:border-box;pointer-events:none;z-index:3}
}
/* Desktop: equal tiles, max 5 across. 4 or fewer stretch (each capped at 1/4); a 6th makes the row scroll. Never a 2nd row. */
.ukt-diy__item{flex:1 0 calc((100% - 64px)/5);max-width:calc((100% - 48px)/4);scroll-snap-align:start;display:flex;margin:0;padding:0}
.ukt-diy__tile{display:flex;flex-direction:column;width:100%;background:#fff;border:1px solid #dde2e5;color:#2d3e4a;text-decoration:none;position:relative}
.ukt-diy__tile:hover{border-color:#2d3e4a;text-decoration:none;color:#2d3e4a}
.ukt-diy__tile:focus{text-decoration:none} /* F1: stop the theme's link underline on focus */
.ukt-diy__tile:focus-visible{outline:3px solid #2d3e4a;outline-offset:3px;box-shadow:0 0 0 6px #fed700}
.ukt-diy__img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#e6eaed}
.ukt-diy__name{display:block;background:#2d3e4a;color:#fff;text-transform:uppercase;font-weight:700;text-align:center;padding:11px 6px;font-size:14px;letter-spacing:.02em}
.ukt-diy__text{display:block;flex:1;padding:10px 12px 6px;font-size:13px;line-height:1.4;color:#444}
.ukt-diy__btn{display:block;margin:6px 12px 14px;padding:9px 6px;text-align:center;font-weight:700;font-size:13px;text-transform:uppercase;border:2px solid #fed700;color:#2d3e4a;background:#fff}
.ukt-diy__tile:hover .ukt-diy__btn{background:#fed700}
.ukt-diy__badge{position:absolute;top:10px;left:10px;z-index:1;background:#b1be2e;color:#2d3e4a;font-weight:800;font-size:11px;letter-spacing:.06em;padding:3px 7px;text-transform:uppercase}
.ukt-diy__item--new .ukt-diy__btn{background:#fed700}
/* Arrows (tablet/desktop) and dots (phone): only shown when the JS (Part 3) runs AND the row actually overflows.
   Back arrow hidden at the start, forward arrow hidden at the end. Each click = one tile. */
.ukt-diy__nav{display:none;position:absolute;top:calc(50% - 22px);width:44px;height:44px;border-radius:50%;border:0;background:#2d3e4a;color:#fff;font-size:24px;line-height:44px;
  text-align:center;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.25);padding:0;z-index:2}
.ukt-diy__nav--prev{left:-8px}.ukt-diy__nav--next{right:-8px}
.ukt-diy__nav:focus-visible{outline:3px solid #fed700;outline-offset:2px}
.ukt-diy.is-js .ukt-diy__nav.is-on{display:block}
.ukt-diy__dots[hidden]{display:none!important}
.ukt-diy__dots{display:none;justify-content:center;gap:7px;margin-top:12px}
.ukt-diy__dots span{width:8px;height:8px;border-radius:4px;background:#c3cad0;transition:width .2s}
.ukt-diy__dots span.is-on{background:#7a8a2a;width:22px}
@media (prefers-reduced-motion:no-preference){.ukt-diy__row{scroll-behavior:smooth}}
/* Tablet: 3 across, then scroll */
@media (max-width:991px){.ukt-diy__item{flex:0 0 calc((100% - 32px)/3);max-width:none}}
/* Phone: swipe row, tile ~74% wide so the next one peeks in; NO arrows (swipe + peek), dots under the row */
@media (max-width:767px){
  .ukt-diy{padding:22px 0 24px}
  .ukt-diy__in{padding:0}
  .ukt-diy__head{padding:0 15px}
  .ukt-diy__title{font-size:23px;width:100%}
  .ukt-diy__row{gap:12px;padding:9px 15px 11px;margin:-9px 0;scroll-padding:0 15px} /* F1: vertical room only; the 15px sides already fit the ring */
  .ukt-diy__track:has(> .ukt-diy__row:focus-visible)::after{left:2px;right:2px} /* 1.0.2: phone row has no side margin */
  .ukt-diy__item{flex:0 0 74%;max-width:none}
  .ukt-diy__nav{display:none!important}
  .ukt-diy__all{margin:2px 0 0;width:100%}
  .ukt-diy.is-js .ukt-diy__dots{display:flex}
}