{"product_id":"velr-detail-kit","title":"VELR Detail Kit","description":"\u003cstyle\u003e\n  .velr-detail {\n    --bg: #050505;\n    --card: #0b0b0b;\n    --text: #f5f5f5;\n    --muted: #969696;\n    --border: rgba(255,255,255,0.12);\n\n    position: relative;\n    overflow: hidden;\n    background: var(--bg);\n    color: var(--text);\n    padding: 75px 22px;\n    font-family: Arial, Helvetica, sans-serif;\n\n    \/* Allows the grid to react to THIS section's width *\/\n    container-type: inline-size;\n  }\n\n  \/* LUXURY AMBIENT GLOW *\/\n\n  .velr-detail::before {\n    content: \"\";\n    position: absolute;\n    width: 700px;\n    height: 700px;\n    top: -350px;\n    left: 50%;\n    transform: translateX(-50%);\n    background: radial-gradient(\n      circle,\n      rgba(255,255,255,0.075) 0%,\n      rgba(255,255,255,0.025) 35%,\n      transparent 70%\n    );\n    pointer-events: none;\n  }\n\n  .velr-detail::after {\n    content: \"\";\n    position: absolute;\n    width: 500px;\n    height: 500px;\n    right: -250px;\n    bottom: -300px;\n    background: radial-gradient(\n      circle,\n      rgba(255,255,255,0.04),\n      transparent 70%\n    );\n    pointer-events: none;\n  }\n\n  .velr-detail-container {\n    position: relative;\n    z-index: 2;\n    width: 100%;\n    max-width: 1080px;\n    margin: 0 auto;\n  }\n\n\n  \/* ================================\n     INTRO\n     ================================ *\/\n\n  .velr-detail-eyebrow {\n    text-align: center;\n    color: #888;\n    font-size: 11px;\n    letter-spacing: 4px;\n    text-transform: uppercase;\n    margin-bottom: 18px;\n    animation: velrDetailFade 0.8s ease forwards;\n  }\n\n  .velr-detail-title {\n    margin: 0 auto;\n    max-width: 950px;\n    text-align: center;\n\n    font-size: clamp(44px, 6vw, 76px);\n    line-height: 0.98;\n    font-weight: 500;\n    letter-spacing: -3px;\n\n    background: linear-gradient(\n      110deg,\n      #707070 0%,\n      #f7f7f7 25%,\n      #a0a0a0 48%,\n      #ffffff 70%,\n      #686868 100%\n    );\n\n    background-size: 220% auto;\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n\n    animation:\n      velrDetailFade 0.9s ease forwards,\n      velrDetailMetal 7s linear infinite;\n  }\n\n  .velr-detail-intro {\n    width: 100%;\n    max-width: 680px;\n    margin: 25px auto 0;\n\n    text-align: center;\n    color: var(--muted);\n\n    font-size: 15px;\n    line-height: 1.75;\n\n    animation: velrDetailFade 1s ease 0.15s both;\n  }\n\n  .velr-detail-divider {\n    width: 75px;\n    height: 1px;\n    margin: 43px auto 58px;\n\n    background: linear-gradient(\n      90deg,\n      transparent,\n      #aaa,\n      transparent\n    );\n\n    opacity: 0.7;\n  }\n\n\n  \/* ================================\n     SECTION LABEL\n     ================================ *\/\n\n  .velr-detail-label {\n    text-align: center;\n    color: #777;\n\n    text-transform: uppercase;\n    letter-spacing: 4px;\n\n    font-size: 10px;\n    margin-bottom: 30px;\n  }\n\n\n  \/* ================================\n     12 PIECE GRID\n     ================================ *\/\n\n  .velr-detail-grid {\n    display: grid;\n\n    \/*\n      IMPORTANT FIX:\n      Cards will never be crushed into tiny columns.\n      Browser chooses how many can actually fit.\n    *\/\n    grid-template-columns:\n      repeat(auto-fit, minmax(min(210px, 100%), 1fr));\n\n    gap: 14px;\n\n    width: 100%;\n    max-width: 1050px;\n    margin: 0 auto;\n  }\n\n  .velr-detail-card {\n    position: relative;\n    overflow: hidden;\n\n    min-width: 0;\n    min-height: 210px;\n\n    padding: 27px;\n\n    box-sizing: border-box;\n\n    background: linear-gradient(\n      145deg,\n      rgba(255,255,255,0.055),\n      rgba(255,255,255,0.012)\n    );\n\n    border: 1px solid var(--border);\n    border-radius: 4px;\n\n    opacity: 0;\n    transform: translateY(24px);\n\n    animation: velrDetailCard 0.7s ease forwards;\n\n    transition:\n      transform 0.45s cubic-bezier(.2,.8,.2,1),\n      border-color 0.45s ease,\n      box-shadow 0.45s ease;\n  }\n\n  .velr-detail-card:nth-child(1) {\n    animation-delay: .08s;\n  }\n\n  .velr-detail-card:nth-child(2) {\n    animation-delay: .14s;\n  }\n\n  .velr-detail-card:nth-child(3) {\n    animation-delay: .20s;\n  }\n\n  .velr-detail-card:nth-child(4) {\n    animation-delay: .26s;\n  }\n\n  .velr-detail-card:nth-child(5) {\n    animation-delay: .32s;\n  }\n\n  .velr-detail-card:nth-child(6) {\n    animation-delay: .38s;\n  }\n\n  .velr-detail-card:nth-child(7) {\n    animation-delay: .44s;\n  }\n\n  .velr-detail-card:nth-child(8) {\n    animation-delay: .50s;\n  }\n\n  .velr-detail-card:nth-child(9) {\n    animation-delay: .56s;\n  }\n\n  .velr-detail-card:nth-child(10) {\n    animation-delay: .62s;\n  }\n\n  .velr-detail-card:nth-child(11) {\n    animation-delay: .68s;\n  }\n\n  .velr-detail-card:nth-child(12) {\n    animation-delay: .74s;\n  }\n\n\n  \/* CARD HOVER *\/\n\n  .velr-detail-card:hover {\n    transform: translateY(-6px);\n\n    border-color: rgba(255,255,255,0.28);\n\n    box-shadow:\n      0 20px 50px rgba(0,0,0,0.55),\n      inset 0 1px 0 rgba(255,255,255,0.08);\n  }\n\n\n  \/* CARD SHINE *\/\n\n  .velr-detail-card::after {\n    content: \"\";\n\n    position: absolute;\n\n    width: 160%;\n    height: 100%;\n\n    top: 0;\n    left: -190%;\n\n    background: linear-gradient(\n      100deg,\n      transparent 35%,\n      rgba(255,255,255,0.08) 50%,\n      transparent 65%\n    );\n\n    transform: skewX(-20deg);\n    transition: left 0.8s ease;\n\n    pointer-events: none;\n  }\n\n  .velr-detail-card:hover::after {\n    left: 120%;\n  }\n\n\n  \/* ================================\n     NUMBER\n     ================================ *\/\n\n  .velr-detail-number {\n    width: 38px;\n    height: 38px;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    border: 1px solid rgba(255,255,255,0.19);\n    border-radius: 50%;\n\n    color: #aaa;\n\n    font-size: 11px;\n    letter-spacing: 1px;\n\n    background: rgba(255,255,255,0.025);\n\n    margin-bottom: 22px;\n\n    box-sizing: border-box;\n  }\n\n\n  \/* ================================\n     CARD TEXT\n     ================================ *\/\n\n  .velr-detail-card h3 {\n    margin: 0 0 9px;\n\n    color: #f2f2f2;\n\n    font-size: 17px;\n    line-height: 1.25;\n\n    font-weight: 500;\n    letter-spacing: -0.3px;\n\n    word-break: normal;\n    overflow-wrap: normal;\n  }\n\n  .velr-detail-card p {\n    margin: 0;\n\n    color: #858585;\n\n    font-size: 12px;\n    line-height: 1.65;\n\n    word-break: normal;\n    overflow-wrap: normal;\n  }\n\n\n  \/* ================================\n     CASE SECTION\n     ================================ *\/\n\n  .velr-detail-case {\n    max-width: 900px;\n\n    margin: 75px auto 0;\n\n    padding: 48px 35px;\n\n    text-align: center;\n\n    border-top: 1px solid rgba(255,255,255,0.08);\n    border-bottom: 1px solid rgba(255,255,255,0.08);\n\n    animation: velrDetailFade 1s ease 0.9s both;\n  }\n\n  .velr-detail-case-label {\n    color: #777;\n\n    font-size: 10px;\n    letter-spacing: 4px;\n\n    text-transform: uppercase;\n\n    margin-bottom: 17px;\n  }\n\n  .velr-detail-case h2 {\n    margin: 0;\n\n    font-size: clamp(28px, 4vw, 44px);\n\n    line-height: 1.08;\n\n    font-weight: 400;\n\n    letter-spacing: -1.5px;\n\n    background: linear-gradient(\n      100deg,\n      #888,\n      #fff,\n      #888\n    );\n\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n  }\n\n  .velr-detail-case p {\n    max-width: 600px;\n\n    margin: 19px auto 0;\n\n    color: #888;\n\n    font-size: 14px;\n    line-height: 1.75;\n  }\n\n\n  \/* ================================\n     FINAL\n     ================================ *\/\n\n  .velr-detail-final {\n    text-align: center;\n\n    margin-top: 58px;\n\n    animation: velrDetailFade 1s ease 1s both;\n  }\n\n  .velr-detail-final-small {\n    color: #777;\n\n    text-transform: uppercase;\n\n    letter-spacing: 4px;\n\n    font-size: 10px;\n\n    margin-bottom: 17px;\n  }\n\n  .velr-detail-final h2 {\n    margin: 0;\n\n    font-size: clamp(30px, 4vw, 46px);\n\n    font-weight: 400;\n\n    letter-spacing: -1.5px;\n\n    line-height: 1.05;\n\n    background: linear-gradient(\n      100deg,\n      #888,\n      #fff,\n      #888\n    );\n\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n  }\n\n  .velr-detail-accent {\n    display: flex;\n\n    align-items: center;\n    justify-content: center;\n\n    gap: 10px;\n\n    margin-top: 30px;\n\n    color: #777;\n\n    font-size: 10px;\n\n    letter-spacing: 3px;\n\n    text-transform: uppercase;\n  }\n\n  .velr-detail-accent::before,\n  .velr-detail-accent::after {\n    content: \"\";\n\n    width: 28px;\n    height: 1px;\n\n    background: #444;\n  }\n\n\n  \/* ================================\n     ANIMATIONS\n     ================================ *\/\n\n  @keyframes velrDetailFade {\n\n    from {\n      opacity: 0;\n      transform: translateY(22px);\n    }\n\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n\n  }\n\n\n  @keyframes velrDetailCard {\n\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n\n  }\n\n\n  @keyframes velrDetailMetal {\n\n    0% {\n      background-position: 200% center;\n    }\n\n    100% {\n      background-position: -200% center;\n    }\n\n  }\n\n\n  \/* =================================================\n     CONTAINER FIX\n     This responds to the actual Shopify column width\n     ================================================= *\/\n\n  @container (max-width: 700px) {\n\n    .velr-detail-grid {\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n      gap: 14px;\n    }\n\n    .velr-detail-card {\n      min-height: 215px;\n      padding: 24px;\n    }\n\n    .velr-detail-card h3 {\n      font-size: 17px;\n      line-height: 1.25;\n    }\n\n    .velr-detail-card p {\n      font-size: 12px;\n      line-height: 1.6;\n    }\n\n  }\n\n\n  \/*\n    If Shopify gives this block VERY little space,\n    use one card per row rather than crushing the text.\n  *\/\n\n  @container (max-width: 450px) {\n\n    .velr-detail-grid {\n      grid-template-columns: 1fr;\n    }\n\n  }\n\n\n  \/* ================================\n     MOBILE\n     Original mobile behaviour\n     ================================ *\/\n\n  @media (max-width: 700px) {\n\n    .velr-detail {\n      padding: 58px 17px;\n    }\n\n    .velr-detail-title {\n      font-size: clamp(42px, 13vw, 62px);\n\n      letter-spacing: -3px;\n\n      line-height: 0.98;\n    }\n\n    .velr-detail-intro {\n      font-size: 14px;\n\n      line-height: 1.7;\n    }\n\n    .velr-detail-divider {\n      margin-bottom: 48px;\n    }\n\n    .velr-detail-grid {\n      grid-template-columns: 1fr;\n\n      gap: 10px;\n    }\n\n    .velr-detail-card {\n      min-height: auto;\n\n      padding: 27px;\n    }\n\n    .velr-detail-card h3 {\n      font-size: 19px;\n    }\n\n    .velr-detail-card p {\n      font-size: 13px;\n    }\n\n    .velr-detail-case {\n      margin-top: 55px;\n\n      padding: 43px 10px;\n    }\n\n    .velr-detail-final {\n      margin-top: 48px;\n    }\n\n  }\n\n\u003c\/style\u003e\n\n\n\u003csection class=\"velr-detail\"\u003e\n\n  \u003cdiv class=\"velr-detail-container\"\u003e\n\n\n    \u003c!-- INTRO --\u003e\n\n    \u003cdiv class=\"velr-detail-eyebrow\"\u003e\n      VELR Grooming\n    \u003c\/div\u003e\n\n\n    \u003ch2 class=\"velr-detail-title\"\u003e\n      The VELR Detail Kit\n    \u003c\/h2\u003e\n\n\n    \u003cp class=\"velr-detail-intro\"\u003e\n      A complete collection of precision grooming tools,\n      designed to keep your nails, cuticles and finer details\n      looking clean, sharp and well maintained.\n    \u003c\/p\u003e\n\n\n    \u003cdiv class=\"velr-detail-divider\"\u003e\u003c\/div\u003e\n\n\n    \u003c!-- 12 PIECES --\u003e\n\n    \u003cdiv class=\"velr-detail-label\"\u003e\n      12 Precision Essentials\n    \u003c\/div\u003e\n\n\n    \u003cdiv class=\"velr-detail-grid\"\u003e\n\n\n      \u003c!-- 01 --\u003e\n\n      \u003cdiv class=\"velr-detail-card\"\u003e\n\n        \u003cdiv class=\"velr-detail-number\"\u003e\n          01\n        \u003c\/div\u003e\n\n        \u003ch3\u003e\n          Nail Clipper\n        \u003c\/h3\u003e\n\n        \u003cp\u003e\n          For clean, precise nail trimming.\n        \u003c\/p\u003e\n\n      \u003c\/div\u003e\n\n\n      \u003c!-- 02 --\u003e\n\n      \u003cdiv class=\"velr-detail-card\"\u003e\n\n        \u003cdiv class=\"velr-detail-number\"\u003e\n          02\n        \u003c\/div\u003e\n\n        \u003ch3\u003e\n          Large Nail Clipper\n        \u003c\/h3\u003e\n\n        \u003cp\u003e\n          Designed for larger nails and controlled trimming.\n        \u003c\/p\u003e\n\n      \u003c\/div\u003e\n\n\n      \u003c!-- 03 --\u003e\n\n      \u003cdiv class=\"velr-detail-card\"\u003e\n\n        \u003cdiv class=\"velr-detail-number\"\u003e\n          03\n        \u003c\/div\u003e\n\n        \u003ch3\u003e\n          Precision Nail Clipper\n        \u003c\/h3\u003e\n\n        \u003cp\u003e\n          For more controlled and detailed trimming.\n        \u003c\/p\u003e\n\n      \u003c\/div\u003e\n\n\n      \u003c!-- 04 --\u003e\n\n      \u003cdiv class=\"velr-detail-card\"\u003e\n\n        \u003cdiv class=\"velr-detail-number\"\u003e\n          04\n        \u003c\/div\u003e\n\n        \u003ch3\u003e\n          Grooming Scissors\n        \u003c\/h3\u003e\n\n        \u003cp\u003e\n          For precise cutting and fine detailing.\n        \u003c\/p\u003e\n\n      \u003c\/div\u003e\n\n\n      \u003c!-- 05 --\u003e\n\n      \u003cdiv class=\"velr-detail-card\"\u003e\n\n        \u003cdiv class=\"velr-detail-number\"\u003e\n          05\n        \u003c\/div\u003e\n\n        \u003ch3\u003e\n          Cuticle Nipper\n        \u003c\/h3\u003e\n\n        \u003cp\u003e\n          For neat and controlled cuticle maintenance.\n        \u003c\/p\u003e\n\n      \u003c\/div\u003e\n\n\n      \u003c!-- 06 --\u003e\n\n      \u003cdiv class=\"velr-detail-card\"\u003e\n\n        \u003cdiv class=\"velr-detail-number\"\u003e\n          06\n        \u003c\/div\u003e\n\n        \u003ch3\u003e\n          Nail File\n        \u003c\/h3\u003e\n\n        \u003cp\u003e\n          Smooths and shapes rough nail edges.\n        \u003c\/p\u003e\n\n      \u003c\/div\u003e\n\n\n      \u003c!-- 07 --\u003e\n\n      \u003cdiv class=\"velr-detail-card\"\u003e\n\n        \u003cdiv class=\"velr-detail-number\"\u003e\n          07\n        \u003c\/div\u003e\n\n        \u003ch3\u003e\n          Cuticle Pusher\n        \u003c\/h3\u003e\n\n        \u003cp\u003e\n          Designed for maintaining clean, tidy cuticles.\n        \u003c\/p\u003e\n\n      \u003c\/div\u003e\n\n\n      \u003c!-- 08 --\u003e\n\n      \u003cdiv class=\"velr-detail-card\"\u003e\n\n        \u003cdiv class=\"velr-detail-number\"\u003e\n          08\n        \u003c\/div\u003e\n\n        \u003ch3\u003e\n          V-Groove Nail Tool\n        \u003c\/h3\u003e\n\n        \u003cp\u003e\n          For detailed nail care and precision work.\n        \u003c\/p\u003e\n\n      \u003c\/div\u003e\n\n\n      \u003c!-- 09 --\u003e\n\n      \u003cdiv class=\"velr-detail-card\"\u003e\n\n        \u003cdiv class=\"velr-detail-number\"\u003e\n          09\n        \u003c\/div\u003e\n\n        \u003ch3\u003e\n          Precision Cleaning Tool\n        \u003c\/h3\u003e\n\n        \u003cp\u003e\n          Reaches smaller, harder-to-reach areas.\n        \u003c\/p\u003e\n\n      \u003c\/div\u003e\n\n\n      \u003c!-- 10 --\u003e\n\n      \u003cdiv class=\"velr-detail-card\"\u003e\n\n        \u003cdiv class=\"velr-detail-number\"\u003e\n          10\n        \u003c\/div\u003e\n\n        \u003ch3\u003e\n          Nail Detail Tool\n        \u003c\/h3\u003e\n\n        \u003cp\u003e\n          For precise grooming and finer details.\n        \u003c\/p\u003e\n\n      \u003c\/div\u003e\n\n\n      \u003c!-- 11 --\u003e\n\n      \u003cdiv class=\"velr-detail-card\"\u003e\n\n        \u003cdiv class=\"velr-detail-number\"\u003e\n          11\n        \u003c\/div\u003e\n\n        \u003ch3\u003e\n          Fine Point Tool\n        \u003c\/h3\u003e\n\n        \u003cp\u003e\n          Designed for detailed grooming and care.\n        \u003c\/p\u003e\n\n      \u003c\/div\u003e\n\n\n      \u003c!-- 12 --\u003e\n\n      \u003cdiv class=\"velr-detail-card\"\u003e\n\n        \u003cdiv class=\"velr-detail-number\"\u003e\n          12\n        \u003c\/div\u003e\n\n        \u003ch3\u003e\n          Dual-Purpose Grooming Tool\n        \u003c\/h3\u003e\n\n        \u003cp\u003e\n          For additional nail and cuticle maintenance.\n        \u003c\/p\u003e\n\n      \u003c\/div\u003e\n\n\n    \u003c\/div\u003e\n\n\n    \u003c!-- CASE --\u003e\n\n    \u003cdiv class=\"velr-detail-case\"\u003e\n\n      \u003cdiv class=\"velr-detail-case-label\"\u003e\n        The VELR Case\n      \u003c\/div\u003e\n\n      \u003ch2\u003e\n        Everything in its place.\n      \u003c\/h2\u003e\n\n      \u003cp\u003e\n        Keep all 12 essentials organised inside a sleek,\n        protective case designed for your bathroom counter,\n        grooming drawer or travel bag.\n      \u003c\/p\u003e\n\n    \u003c\/div\u003e\n\n\n    \u003c!-- FINAL --\u003e\n\n    \u003cdiv class=\"velr-detail-final\"\u003e\n\n      \u003cdiv class=\"velr-detail-final-small\"\u003e\n        Complete. Precise. Refined.\n      \u003c\/div\u003e\n\n      \u003ch2\u003e\n        12 essentials.\u003cbr\u003e\n        One refined routine.\n      \u003c\/h2\u003e\n\n      \u003cdiv class=\"velr-detail-accent\"\u003e\n        Your grooming routine, elevated\n      \u003c\/div\u003e\n\n    \u003c\/div\u003e\n\n\n  \u003c\/div\u003e\n\n\u003c\/section\u003e","brand":"My Store","offers":[{"title":"Default Title","offer_id":54197103165804,"sku":null,"price":649.99,"currency_code":"ZAR","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/1007\/6533\/5916\/files\/ChatGPTImageAug14_2026_09_10_01PM.png?v=1786734651","url":"https:\/\/velr.co.za\/products\/velr-detail-kit","provider":"VELR","version":"1.0","type":"link"}