/* Pantone & RAL color swatch cards — loaded on wall type and product pages */

/* ==========================================================================
   Pantone cards
   ========================================================================== */

.pantone-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 10px;
    margin-bottom: 40px;
}

.pantone-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 80px;
    background: #fff;
}

.pantone-swatch {
    width: 80px;
    height: 80px;
    border: 1px solid rgba(0, 0, 0, .08);
    background: #ddd;
}

.pantone-text {
    padding: 6px 4px;
    width: 100%;
    text-align: left;
}

.pantone-brand {
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #374151;
}

.pantone-brand::before {
    content: "PANTONE\00AE";
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #374151;
}

.pantone-number {
    font-size: 14px;
    font-weight: 700;
}

/* Greens / Teals */
.p-7718-c .pantone-swatch { background: #007672; }
.p-7737-c .pantone-swatch { background: #6BA539; }
.p-7472-c .pantone-swatch { background: #5CB8B2; }
.p-7465-c .pantone-swatch { background: #40C1AC; }
.p-324-c  .pantone-swatch { background: #9CDBD9; }
.p-317-c  .pantone-swatch { background: #B1E4E3; }
.p-580-c  .pantone-swatch { background: #C4D6A4; }

/* Blues */
.p-284-c  .pantone-swatch { background: #6CACE4; }

/* Oranges / Yellows / Reds / Pinks / Purples */
.p-021-c  .pantone-swatch { background: #FE5000; }
.p-1375-c .pantone-swatch { background: #FF9E1B; }
.p-1495-c .pantone-swatch { background: #FF8F1C; }
.p-1777-c .pantone-swatch { background: #FB637E; }
.p-192-c  .pantone-swatch { background: #E40046; }
.p-231-c  .pantone-swatch { background: #F277C6; }
.p-2562-c .pantone-swatch { background: #D7A9E3; }
.p-7425-c .pantone-swatch { background: #B52555; }
.p-7659-c .pantone-swatch { background: #5D3754; }
.p-107-c  .pantone-swatch { background: #FBE122; }
.p-394-c  .pantone-swatch { background: #EDE939; }

.p-11-0601-tpx .pantone-swatch { background: #f2f2f2; }
.p-2024-c .pantone-swatch { background: #f87d57; }
.p-3546-c .pantone-swatch { background: #cc001a; }
.p-2347-c .pantone-swatch { background: #e20600; }
.p-2297-c .pantone-swatch { background: #c1df16; }

/* Blues & Cyans */
.p-283-c  .pantone-swatch { background: #81C1EA; }
.p-308-c  .pantone-swatch { background: #00587C; }
.p-270-c  .pantone-swatch { background: #A7A8D4; }
.p-7443-c .pantone-swatch { background: #dcdae8; }
.p-250-c  .pantone-swatch { background: #e8bae5; }
.p-7451-c .pantone-swatch { background: #89CFF0; }
.p-635-c  .pantone-swatch { background: #A1D7E7; }
.p-304-c  .pantone-swatch { background: #9ADBE8; }
.p-310-c  .pantone-swatch { background: #6AD1E3; }
.p-631-c  .pantone-swatch { background: #3BB9DD; }
.p-647-c  .pantone-swatch { background: #236192; }
.p-656-c  .pantone-swatch { background: #DAE1E7; }
.p-7689-c .pantone-swatch { background: #274D70; }
.p-7471-c .pantone-swatch { background: #78CDD7; }
.p-7473-c .pantone-swatch { background: #348781; }
.p-7474-c .pantone-swatch { background: #007681; }
.p-332-c  .pantone-swatch { background: #9BE3D2; }

/* Oranges & Yellows */
.p-1665-c .pantone-swatch { background: #E35205; }
.p-1235-c .pantone-swatch { background: #FFC72C; }
.p-106-c  .pantone-swatch { background: #FFD100; }
.p-137-c  .pantone-swatch { background: #FCA311; }
.p-1205-c .pantone-swatch { background: #FDD26E; }
.p-171-c  .pantone-swatch { background: #FF6F61; }
.p-169-c  .pantone-swatch { background: #FFB3AB; }
.p-359-c  .pantone-swatch { background: #97D700; }
.p-575-c  .pantone-swatch { background: #44693D; }

/* Reds & Pinks */
.p-182-c  .pantone-swatch { background: #fabacb; }
.p-183-c  .pantone-swatch { background: #FF9BB3; }
.p-190-c  .pantone-swatch { background: #F56FA1; }
.p-196-c  .pantone-swatch { background: #ECC7CD; }
.p-243-c  .pantone-swatch { background: #E2B7E7; }
.p-7436-c .pantone-swatch { background: #E6D3E2; }
.p-7438-c .pantone-swatch { background: #CDA2DC; }
.p-2572-c .pantone-swatch { background: #B288D2; }
.p-7441-c .pantone-swatch { background: #6A5BB1; }
.p-705-c  .pantone-swatch { background: #f5dbdf; }
.p-161-c  .pantone-swatch { background: #613d20; }

/* Greens */
.p-554-c  .pantone-swatch { background: #004F39; }
.p-7741-c .pantone-swatch { background: #6BA539; }
.p-372-c  .pantone-swatch { background: #d3ec8d; }

/* Placeholders */
.p-2050-c .pantone-swatch { background: #eed7e6; }
.p-4208-c .pantone-swatch { background: #3e7154; }
.p-0821-c .pantone-swatch { background: #73d1ea; }

/* ==========================================================================
   RAL cards
   ========================================================================== */

.ral-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 10px;
    margin-bottom: 40px;
}

.ral-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 120px;
    background: #fff;
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}

.ral-swatch {
    width: 80px;
    height: 80px;
    border: 1px solid rgba(0, 0, 0, .08);
    background: #ddd;
}

.ral-text {
    padding: 6px 4px;
    width: 100%;
    text-align: left;
}

.element-label {
    width: 100%;
    font-size: 10px;
    font-weight: 600;
    padding: 8px 6px 4px 6px;
    color: #374151;
}

.ral-brand {
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #374151;
}

.ral-brand::before {
    content: "RAL";
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #374151;
}

.ral-number {
    font-size: 14px;
    font-weight: 700;
}

/* RAL swatch colors */
.r-1020 .ral-swatch { background: #9f8e64; }
.r-8003 .ral-swatch { background: #7d4b27; }
.r-6018 .ral-swatch { background: #609a3b; }
.r-6029 .ral-swatch { background: #00703d; }
.r-5012 .ral-swatch { background: #038ab7; }
.r-1023 .ral-swatch { background: #f7b504; }
.r-7035 .ral-swatch { background: #c5c6c4; }
.r-7009 .ral-swatch { background: #5e6058; }
.r-1018 .ral-swatch { background: #fbca30; }
.r-4010 .ral-swatch { background: #bb4078; }
.r-5018 .ral-swatch { background: #008b8d; }
.r-3018 .ral-swatch { background: #c7414c; }
.r-6027 .ral-swatch { background: #7dbbb6; }
.r-5015 .ral-swatch { background: #087db1; }
.r-1033 .ral-swatch { background: #f59a25; }
.r-1037 .ral-swatch { background: #f09203; }
.r-29050-40 .ral-swatch { background: #6f79ba; }
.r-3020 .ral-swatch { background: #bb2218; }
.r-1003 .ral-swatch { background: #f9a800; }
.r-1015 .ral-swatch { background: #e6d2b5; }
.r-9010 .ral-swatch { background: #f1ece1; }
.r-2008 .ral-swatch { background: #ec681a; }
.r-3002 .ral-swatch { background: #9b2321; }
.r-5002 .ral-swatch { background: #00387b; }
.r-6005 .ral-swatch { background: #114232; }
.r-7040 .ral-swatch { background: #989ea1; }
.r-8017 .ral-swatch { background: #442f29; }
.r-9005 .ral-swatch { background: #0e0e10; }
.r-1001 .ral-swatch { background: #d0b084; }
.r-7000 .ral-swatch { background: #7a888e; }