/* Local review only. Colors are deterministic; no content or geometry changes. */
:root {
  --frame-green: #6d8f72;
  --frame-blue: #6c8fa8;
  --frame-violet: #9580a6;
  --frame-peach: #bf8c73;
}

/* Existing 1px panel borders retain their width, padding and box model. */
#products #cosmetics .product-panel { border-color: var(--frame-peach); }
#products #diet .product-panel { border-color: var(--frame-green); }
#products #nutrition .product-panel { border-color: var(--frame-blue); }
#products #innerbeauty .product-panel { border-color: var(--frame-violet); }
#products #hair .product-panel { border-color: var(--frame-green); }
#products #recommend-products .product-card:nth-child(4n+1) .product-panel { border-color: var(--frame-peach); }
#products #recommend-products .product-card:nth-child(4n+2) .product-panel { border-color: var(--frame-green); }
#products #recommend-products .product-card:nth-child(4n+3) .product-panel { border-color: var(--frame-blue); }
#products #recommend-products .product-card:nth-child(4n) .product-panel { border-color: var(--frame-violet); }

#services .service-photo-card:nth-child(1) { border-color: var(--frame-blue); }
#services .service-photo-card:nth-child(2) { border-color: var(--frame-green); }
#services .service-photo-card:nth-child(3) { border-color: var(--frame-violet); }
#services .service-photo-card:nth-child(4) { border-color: var(--frame-peach); }
#blog-platforms .blog-hub-toggle { border-color: var(--frame-green); }
#blog-platforms .blog-fortune { border-color: var(--frame-violet); }
#blog-platforms .recommendation-hub > .blog-platform { border-color: var(--frame-peach); }

/* Noninteractive icon frames use inset outlines, leaving image and icon sizes intact. */
#blog-platforms .blog-platform-icon { outline: 1px solid var(--frame-green); outline-offset: -1px; }
#blog-platforms .blog-fortune .blog-platform-icon { outline-color: var(--frame-violet); }
#blog-platforms .recommendation-hub .blog-platform-icon { outline-color: var(--frame-peach); }

#site-search .home-query-row { border-color: var(--frame-green); }
#site-search #home-engine { border-color: var(--frame-violet); }
/* Borderless controls receive a painted inset frame, which occupies no layout space. */
#site-search .home-search-go { box-shadow: inset 0 0 0 1px var(--frame-blue); }
#site-search .query-clear { box-shadow: inset 0 0 0 1px var(--frame-peach); }
#category-filters button:nth-child(4n+1) { box-shadow: inset 0 0 0 1px var(--frame-green); }
#category-filters button:nth-child(4n+2) { box-shadow: inset 0 0 0 1px var(--frame-peach); }
#category-filters button:nth-child(4n+3) { box-shadow: inset 0 0 0 1px var(--frame-blue); }
#category-filters button:nth-child(4n) { box-shadow: inset 0 0 0 1px var(--frame-violet); }

/* Draw above the ad image without changing its crop, dimensions, or click target. */
.hero-carousel::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--frame-peach);
  border-radius: inherit;
  box-sizing: border-box;
  pointer-events: none;
  z-index: 10;
}
/* Existing :focus-visible and :focus-within outlines remain untouched. */