.elementor-21103 .elementor-element.elementor-element-c4a6edb{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:30px;--margin-bottom:100px;--margin-left:0px;--margin-right:0px;--padding-top:0%;--padding-bottom:0%;--padding-left:4%;--padding-right:4%;}/* Start custom CSS for html, class: .elementor-element-e0390e8 *//* Default: skeletons hidden, real content hidden */
  [data-skel] { display: none; }
  .hide-while-loading { display: none; }

  /* While loading: show skeletons, keep real content hidden */
  body.is-loading [data-skel] { display: block; }
  body.is-loading .hide-while-loading { display: none; }

  /* After loading: hide skeletons, show real content */
  body:not(.is-loading) [data-skel] { display: none; }
  body:not(.is-loading) .hide-while-loading { display: block; }
    
        /* ---------- Base / Scope ---------- */
        .pdp {
            --ink: #0f172a;
            --muted: #6b7280;
            --border: #e5e7eb;
            --bg: #fff;
            --primary: #0b1222;
            --radius: 16px;
            font-family: "Inter Tight", Sans-serif !important;
        }

        .pdp * {
            box-sizing: border-box;
        }

        .pdp {
            color: var(--ink);
            font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        }

        /* Layout */
        .pdp-wrap {
            display: grid;
            grid-template-columns: 1.1fr 1fr;
            gap: 50px;
            align-items: start;
        }

        @media (max-width: 900px) {
            .pdp-wrap {
                grid-template-columns: 1fr;
            }
        }

        /* ---------- Media ---------- */
        .pdp-hero {
            border-radius: 7px;
            overflow: hidden;
            background: #ffffff;
            border: 2px solid #efeded;

        }

        .pdp-hero img {
            width: 100%;
            height: 620px;
            display: block;
            object-fit: contain;
            padding: 25px;
        }

        .pdp-thumbs {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            margin-top: 16px;
        }

        .pdp-thumbs button {
            padding: 0;
            border: 0;
            background: none;
            cursor: pointer;
            border-radius: 6px;
            overflow: hidden;
        }

        .pdp-thumbs img {
            width: 100%;
            height: 190px;
            display: block;
            object-fit: contain;
        }

        .pdp-thumbs button.is-active {
    border-radius: 6px;
    background: none;
    border: 1px solid #d7bdff;
        }

        .pdp-thumbs button:hover {
            border-radius: 0px;
            background: none;
            border-radius: 6px;
        }

        /* ---------- Info ---------- */
        .pdp-brand {
            color: var(--muted);
            font-size: 19px;
            margin-top: 4px;
        }

        .pdp-title {
            font-size: 30px;
            line-height: 1.2;
            margin: 6px 0 8px;
            font-weight: 500;
        }

        .pdp-from {
            color: #667085;
            margin-bottom: 16px;
            font-size: 20px;
        }

        .pdp-from strong {
            color: #101828;
        }

        .pdp-from strong {
            font-weight: 600;
        }

        /* Colors */
        .pdp-label {
            font-weight: 500;
            margin-bottom: 15px;
            color: #667085;
            font-size: 20px;
        }

        .pdp-colors {
            margin: 16px 0 12px;
        }

        .pdp-swatches {
            display: flex;
            gap: 15px;
            margin-top: 8px;
        }

        .pdp-swatches .swatch {
            width: 36px;
            height: 36px;
            border-radius: 0px;
            background: var(--c, #ddd);
            border: 1px solid rgba(0, 0, 0, .08);
            cursor: pointer;
            position: relative;
            outline: 2px solid transparent;
            outline-offset: 2px;
            padding: 0px;
        }

        .pdp-info {
            max-width: 590px;
            width: 100%;
        }

        .pdp-swatches .swatch.is-active {
            outline-color: #94a3b8;
        }


        /* CTA */
        .pdp-cta {
            margin: 14px 0 16px;
            width: 100%;
            height: 54px;
            border-radius: 10px;
            border: 0;
            background: var(--primary) !important;
            color: #fff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            cursor: pointer;
            border-radius: 6px !important;
        }

        .pdp-cta:hover {
            filter: brightness(0.98);
        }

        /* Expert card */
        .pdp-expert {
            /* display: grid
; */
            grid-template-columns: 1fr auto;
            gap: 14px;
            align-items: center;
            background-image: url(https://blinkswag.com/wp-content/uploads/2025/09/bg-expert.png);
            border-radius: 14px;
            padding: 25px;
            border: 1px solid #eef2ff;
            background-size: cover;
            background-repeat: no-repeat;
        }

        .expert-title {
            font-weight: 600;
            margin-bottom: 6px;
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 22px;
        }

        .expert-text p {
            margin: 0;
            color: #475569;
        }

        .expert-btn {
            height: 52px;
            padding: 0 14px;
            border-radius: 7px !important;
            border: 0;
            background: #101828 !important;
            color: #fff;
            font-weight: 600;
            cursor: pointer;
        }

        .expert-title img {
            width: 75px;
        }

        .bubble {
            width: 26px;
            height: 18px;
            background: #fff;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 3px;
        }

        .dot {
            width: 6px;
            height: 6px;
            background: #c7d2fe;
            border-radius: 50%;
        }

        /* Tabs */
        .pdp-tabs {
            display: flex;
            gap: 10px;
            margin: 50px 0 10px;
        }

        .pdp-tabs .tab {
            height: 48px;
            padding: 0 20px;
            border-radius: 8px;
            border: 1px solid var(--border);
            background: #fff;
            cursor: pointer;
            font-weight: 500;
            color: #667085;
            font-family: "Inter Tight", Sans-serif;
        }

        .pdp-tabs .tab.is-active {
            background: none;
            border: 1px solid #101828;
            color: #101828;
            font-size: 16px;
            font-weight: 500;
            font-family: "Inter Tight", Sans-serif;
        }

        .pdp-tabcontent p {
            color: #475467;
            font-size: 16px;
            font-family: "Inter Tight", Sans-serif;
        }

        .pdp-tabcontent {
            display: none;
            color: #374151;
        }

        .pdp-tabcontent.is-active {
            display: block;
        }

        .expert-text p {
            font-size: 22px;
            color: #101828;
            line-height: 30px;
            margin: 20px 0px;
        }

        button.expert-btn {
            display: flex;
            align-items: center;
            gap: 7px;
            font-size: 18px;
        }

        button.pdp-cta {
            display: flex;
            align-items: center;
            gap: 7px;
            font-size: 18px;
            font-weight: 400;
            margin: 35px 0px;
        }

        /* Small tweaks on mobile */






        .qty-card {
            --ink: #0f172a;
            --muted: #667085;
            --border: #e6e8ec;
            --accent: #6935D3;

            max-width: 660px;
            background: #fff;
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 18px 16px 16px;
            font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            color: var(--ink);
            box-sizing: border-box;
            margin-top: 35px;
        }

        /* Header */
        .qty-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 12px;
        }

        .qty-title {
            font-size: 20px;
            font-weight: 500;
            letter-spacing: 0;
            font-family: "Inter Tight", Sans-serif;
            color: #101828;
        }

        .qty-title .muted {
            color: var(--muted);
            font-weight: 400;
            margin-left: 2px;
            font-size: 16px;
        }

        .qty-caret {
            width: 16px;
            height: 16px;
            color: #98a2b3;
        }

        /* Selector row */
        .qty-box {
            display: grid;
            grid-template-columns: 1fr auto;
            align-items: center;
            gap: 12px;
            padding: 10px 12px;
            border: 1px solid var(--accent);
            /* purple border */
            border-radius: 12px;
            font-family: "Inter Tight", Sans-serif;
        }

        /* Left side (select + per-piece) */
        .qty-left {
            display: flex;
            align-items: baseline;
            gap: 0px;
            min-width: 0;
        }

        .select-wrap {
            position: relative;
            display: inline-flex;
            align-items: center;
        }

        .select-wrap select {
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            border: 0;
            background: transparent;
            padding: 8px 20px 8px 10px;
            font-weight: 600;
            font-size: 19px;
            color: #1D2939;
            border-radius: 8px;
            outline: none;
            font-family: "Inter Tight", Sans-serif;
        }

        .select-wrap .chev {
            position: absolute;
            right: 6px;
            top: 50%;
            transform: translateY(-50%);
            width: 16px;
            height: 16px;
            color: #8b5cf6;
            pointer-events: none;
        }

        .per-piece {
            color: var(--muted);
            font-size: 14px;
            white-space: nowrap;
        }

        /* Right side total */
        .qty-total {
            font-weight: 500;
            font-size: 19px;
            white-space: nowrap;
            padding-right: 4px;
            color: #1D2939;
        }


        .pdp-tabs .tab.is-active:hover {
            border-radius: 7px;
        }

        .pdp-tabs .tab:hover {
            border-radius: 7px;
            background: none;
            color: #000;
        }


        button.technique-btns:hover {
            border-radius: 10px;
            background-color: #f5f5f5;
            color: #464646;
        }

        .gift-qty {
            display: flex;
            gap: 20px;
            align-items: center;
        }

        /* Small screens */
        @media (max-width: 480px) {
            .qty-title {
                font-size: 18px;
            }

            .qty-box {
                grid-template-columns: 1fr;
                gap: 8px;
            }

            .qty-total {
                justify-self: end;
            }
        }














        @media (max-width: 600px) {
            .pdp-thumbs {
                grid-template-columns: repeat(3, 1fr);
                gap: 10px;
            }

            .pdp-title {
                font-size: 24px;
            }
        }















        /* Modal shell (toggle .is-open to show) */
        .modal {
            position: fixed;
            inset: 0;
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            font-family: "Inter Tight", Sans-serif;

        }

        .modal.is-open {
            display: flex
        }

        .modal__backdrop {
            position: absolute;
            inset: 0;
            background: rgba(16, 24, 40, .6);
            backdrop-filter: blur(2px)
        }

        .modal__panel {
            position: relative;
            background: #fff;
            border-radius: 24px;
            overflow: hidden;
            width: min(960px, 96vw);
            max-height: min(92vh, 900px);
            box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
            outline: 0
        }

        .modal__close {
            position: absolute;
            left: 30px;
            top: 14px;
            width: 28px;
            /* height: 32px; */
            border: none;
            border-radius: 999px;
            background: none !important;
            color: #111827;
            font-size: 22px;
            cursor: pointer;
            z-index: 2;
            padding: 0px !important;
        }

        /* Layout */
        .popup {
            display: grid;
            grid-template-columns: 360px 1fr;
            min-height: 540px
        }

        @media (max-width:880px) {
            .popup {
                grid-template-columns: 1fr
            }

            .modal__panel {
                width: min(560px, 96vw)
            }
        }

        /* LEFT: product */
        .popup__left {
            padding: 56px 28px 28px;
            background: #fff
        }

        .product {
            background: #f2f4f7;
            border-radius: 16px;
            overflow: hidden;
            aspect-ratio: 1/1;
            display: flex;
            align-items: center;
            justify-content: center
        }

        .product__img {
            width: 100%;
            height: 100%;
            object-fit: cover
        }

        .product__meta {
            margin-top: 16px
        }

        .product__brand {
            color: #475467;
            font-size: 12px
        }

        .product__title {
            margin: 6px 0 8px;
            font-size: 23px;
            color: #111827;
            font-weight: 400;
        }

        .product__price {
            font-weight: 500;
            font-size: 24px;
            color: #1D2939;
        }

        .product__note {
            margin-top: 5px;
            /* background: #f8fafc; */
            border-radius: 8px;
            padding: 0px 0px;
            font-size: 14px;
            color: #475467;
        }

        /* RIGHT: signup */
        .popup__right {
            padding: 56px 80px;
            background-image: url(https://blinkswag.com/wp-content/uploads/2025/09/bg-signup.jpg);
        }

        .su__headline {
            font-size: 28px;
            line-height: 1.25;
            margin: 0 0 20px;
            color: #101828;
            font-weight: 500;
            text-align: center;
        }

        /* Buttons */
        .btn {
            height: 44px;
            border-radius: 10px;
            border: 1px solid #e5e7eb;
            padding: 0 14px;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
            background: #fff
        }

        .btn--google {
            width: 100%;
            justify-content: center;
            background-color: #fff !important;
            border-radius: 7px !important;
            border: none !important;
            color: #101828 !important;
            font-weight: 400 !important;
            font-size: 16px !important;
            padding: 25px 0px !important;
            transition: 0.3s ease all;
        }

        .gdot {
            display: inline-grid;
            place-items: center;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: #fff;
            border: 1px solid #e5e7eb;
            font: 600 12px/1 system-ui;
            color: #111827
        }

        .btn--primary {
            width: 100%;
            height: 48px;
            border: none;
            border-radius: 12px;
            font-weight: 700;
            color: #fff;
            background: #0b1220
        }

        .btn--primary:hover {
            filter: brightness(1.05)
        }

        button.btn-register-module {
            background-color: #101828;
            font-size: 19px;
            border-radius: 6px;
            margin-top: 15px;
            border: none;
            font-weight: 400;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 6px;
            transition: 0.3s ease all;
        }

        button.btn-register-module:hover {
            background-color: #6935d3;
            border-radius: 6px;
        }

        button.btn-register-module img {
            width: 22px;
        }

        /* Form */
        .form {
            margin-top: 18px;
            display: grid;
            gap: 14px
        }

        .form__row--two {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px
        }

        @media (max-width:520px) {
            .form__row--two {
                grid-template-columns: 1fr
            }
        }

        .field {
            display: grid;
            gap: 6px;
            position: relative;
        }

        .field__label {
            font-size: 15px;
            color: #101828;
        }

        label.field img {
            position: absolute;
            top: 45px;
            left: 13px;
            width: 20px;
        }

        .req {
            color: #ef4444;
            margin-left: 2px
        }

        .field input {
            height: 44px;
            border: 1px solid #e5e7eb;
            border-radius: 10px;
            padding: 0 40px;
            font-size: 14px;
            color: #0b1220;
            background: #fff
        }

        .field input::placeholder {
            color: #9aa4b2
        }

        .field input:focus {
            border-color: #6366f1;
            box-shadow: 0 0 0 3px rgba(99, 102, 241, .15);
            outline: none
        }

        /* Optional: lock body scroll when modal open (if you add/remove this class) */
        .body-lock {
            overflow: hidden
        }

        .btn--google:hover {
            background-color: #101828 !important;
            color: #fff !important;
        }


        .modal[aria-hidden="true"] {
            display: none !important;
        }

        .modal.is-open {
            display: flex !important;
            align-items: center;
            justify-content: center;
        }




        /* Lock swatch color; no hover changes */
        .pdp .pdp-swatches .swatch {
            background: var(--c) !important;
        }

        /* Remove any theme hover/active overrides (white bg, shadows, etc.) */
        .pdp .pdp-swatches .swatch:hover,
        .pdp .pdp-swatches .swatch:active {
            background: var(--c) !important;
            box-shadow: none !important;
            filter: none !important;
            transform: none !important;
            outline: none !important;
        }

        /* Keep your active state only (adjust outline if needed) */
        .pdp .pdp-swatches .swatch.is-active {
            outline: 2px solid #6d28d9;
            outline-offset: 2px;
            border-radius: 0px;
        }

        .pdp .pdp-swatches .swatch:hover {
            border-radius: 0px;
        }


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

        .qty-pill {
            /* sizing */
            width: 132px;
            /* tweak as needed */
            height: 56px;
            /* tall “pill” look */
            padding: 0 44px 0 18px;
            /* left text / right chevron space */
            font: 500 20px/1.2 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
            color: #0f172a;
            /* near-black text */

            /* pill / border */
            border: 1px solid #e6eaf0;
            /* very light gray */
            border-radius: 10px;
            background-color: #fff;

            /* remove default arrow and style our own */
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;

            /* custom chevron (tinted slate) on the right center */
            background-image:
                url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%2355697A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 9l5 5 5-5'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 16px center;
            background-size: 18px 18px;

            cursor: pointer;
            transition: border-color .2s ease, box-shadow .2s ease;
        }

        /* Hover / focus states */
        .qty-pill:hover {
            border-color: #d7dde5;
        }

        .qty-pill:focus {
            outline: none;
            border-color: #c8d0da;
            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.08);
            /* subtle focus ring */
        }

        /* Remove IE’s expand arrow if ever needed */
        select::-ms-expand {
            display: none;
        }
   
   
   
   
   
   
   
    .skeleton {
    position: relative;
    overflow: hidden;
    background: #e5e7eb;            /* neutral-200 */
    border-radius: 12px;
  }
  .skeleton::after {
    content: "";
    position: absolute; inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(
      90deg,
      rgba(229,231,235,0) 0%,
      rgba(255,255,255,0.65) 50%,
      rgba(229,231,235,0) 100%
    );
    animation: shimmer 1.25s ease-in-out infinite;
  }
  @keyframes shimmer {
    100% { transform: translateX(100%); }
  }

  /* --- Hide real UI while loading (but keep layout) --- */
  .is-loading .hide-while-loading {
    visibility: hidden;
  }

  /* --- PDP skeleton shapes --- */
  .s-hero     { width: 100%; aspect-ratio: 1 / 1; }
  .s-thumbrow { width: 100%; height: 72px; margin-top: 12px; border-radius: 10px; }
  .s-brand    { width: 120px; height: 14px; margin: 8px 0; }
  .s-title    { width: 70%; height: 24px; margin: 8px 0; }
  .s-price    { width: 160px; height: 18px; margin: 10px 0 18px; }
  .s-btn      { width: 220px; height: 44px; border-radius: 9999px; }
  .s-expert   { width: 100%; height: 96px; margin-top: 16px; }
  .s-desc     { width: 100%; height: 120px; margin-top: 16px; }

  /* Optional: subtle container spacing if needed */
  .pdp .s-block + .s-block { margin-top: 10px; }




/* --- PDP Thumbnail Carousel (4-up, slide by 1) --- */
.pdp .pdp-thumbs {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    max-width: 100%;
    padding: 5px;
}
.pdp .thumbs-prev, .pdp .thumbs-next {
    flex: 0 0 auto;
    padding: 6px 10px;
   border: 1px solid #e5e7eb; 
    border-radius: 8px;
    cursor: pointer;
    line-height: 1;
    padding: 0px;
    width: 32px;
    height: 32px;
    color: #000;
    font-size: 24px;
}
.pdp .thumbs-prev, .pdp .thumbs-next:hover {
    color: #6935d3;
}
.pdp-thumbs button:hover {
    color: #6935d3;
}
.pdp .thumbs-prev[hidden], .pdp .thumbs-next[hidden]{ display:none; }
.pdp .thumbs-prev[disabled], .pdp .thumbs-next[disabled]{ opacity:.4; cursor:not-allowed; }

/* The visible window for thumbs */
.pdp .thumbs-viewport{
  --cols: 4;               /* exactly 4 visible */
  --gap: 10px;             /* space between thumbs */
  overflow:hidden; flex:1 1 auto; max-width:100%; position:relative;
}

/* Track slides left/right with animation */
.pdp .thumbs-track{
  display:flex; list-style:none; margin:0; padding:0;
  gap:var(--gap);
  transform: translateX(var(--x, 0px));
  transition: transform .35s cubic-bezier(.22,.7,.25,1);
  will-change: transform;
}

/* Each thumb fills 1/4 of the viewport width (minus gaps) */
.pdp .thumbs-track li{
  flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
}

/* Square thumbs, responsive */
.pdp .thumb-btn{
  display:block; width:100%; aspect-ratio:1/1; padding:0; border:0;
  background:transparent; border-radius:8px; overflow:hidden; padding: 10px;
}
.pdp .thumb-btn img{
  width:100%; height:100%; object-fit:contain; display:block;
  border:1px solid #e5e7eb; border-radius:8px;
  transition: transform .2s ease, box-shadow .2s ease; padding: 10px;
}
.pdp .thumb.is-active .thumb-btn img{
  transform: scale(1.02);
  box-shadow: 0 4px 10px rgba(0,0,0,.08);
}

/* Safety: PDP containers never cause page-wide side scroll */
.pdp, .pdp-wrap, .pdp-media{ max-width:100%; overflow:hidden; }


.bs-breadcrumb {
    font-family: inherit;
    margin-top: 35px;
    margin-bottom: 35px;
}
.bs-bc-list { display:flex; align-items:center; gap:0; margin:0; padding:0; list-style:none; }
.bs-bc-item { display:flex; align-items:center; }

/* separators */
.bs-bc-item + .bs-bc-item::before {
  content: "›";
  margin: 0 10px;
  color: #94a3b8; /* subtle grey */
  line-height: 1;
}

/* links */
.bs-bc-link {
    text-decoration: none;
    color: #101828;
    font-weight: 500;
    font-size: 18px;
}
.bs-bc-link:hover { text-decoration: underline; }

/* last crumb (current page) */
.bs-bc-current {
    color: #667085;
    font-weight: 500;
    font-size: 18px;
}

/* home icon alignment */
.bs-bc-home { display:inline-flex; align-items:center; }

/* screen-reader-only text */
.bs-sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,1px,1px); white-space:nowrap; border:0;
}


/* Hide real content that has the .hide-while-loading class */
.hide-while-loading {
  display: none !important;
  visibility: hidden !important;
}

/* When loading finished (after JS runs stopLoading()) */
body:not(.is-loading) .hide-while-loading {
  display: block !important;
  visibility: visible !important;
}/* End custom CSS */