/* =========================================================
   CASED BY SK — FINAL CSS
   ========================================================= */


/* =========================================================
   1. RESET
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    background: #000;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

ul {
    margin: 0;
    padding: 0;
}


/* =========================================================
   2. HEADER
   ========================================================= */

header {
    position: relative;
    z-index: 1000;
    width: 100%;
    background: #fff;
    color: #000;
}

header > nav {
    position: relative;
    min-height: 76px;
    padding: 0 28px;

    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
}

/* Hamburger */

header > nav > button[aria-label="Open menu"],
header > nav > button:first-child {
    justify-self: start;

    width: 34px;
    height: 34px;
    padding: 5px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: transparent;
    color: #000;
    border: 0;
}

/* Logo */

header > nav > div:not(#hamburger-menu) {
    display: flex;
    align-items: center;
    justify-content: center;
}

header > nav > div:not(#hamburger-menu) a {
    display: flex;
    align-items: center;
    justify-content: center;
}

header > nav > div:not(#hamburger-menu) img {
    width: 80px !important;
    height: 70px !important;

    max-width: none !important;

    display: block;
    object-fit: contain;

    /*
       logoxwater.png is the actual CSK nav logo.
       This keeps it visible on the white header.
    */
    opacity: 1 !important;
    visibility: visible !important;
    filter: brightness(0);
}

/* Search */

header > nav > button[aria-label="Open search"] {
    position: absolute;

    right: 96px;
    top: 21px;

    width: 34px;
    height: 34px;
    padding: 5px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: transparent;
    color: #000;
    border: 0;
}

/* Account */

header > nav > a[aria-label="Open CSK Icon Account"] {
    position: absolute;

    right: 55px;
    top: 21px;

    width: 34px;
    height: 34px;
    padding: 5px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: #000;
}

/* Shopping bag */

header > nav > a[aria-label^="Open shopping bag"] {
    position: absolute;

    right: 14px;
    top: 21px;

    width: 34px;
    height: 34px;
    padding: 5px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: #000;
}

header svg {
    display: block;
}


/* =========================================================
   3. HAMBURGER MENU
   ========================================================= */

#hamburger-menu {
    position: absolute;

    top: 76px;
    left: 0;

    width: min(360px, 88vw);
    min-height: calc(100vh - 76px);

    padding: 48px 36px 36px;

    background: #fff;
    color: #000;

    box-shadow: 12px 0 35px rgba(0, 0, 0, 0.08);
}

#hamburger-menu[hidden] {
    display: none;
}

#hamburger-menu ul {
    list-style: none;
}

#hamburger-menu li {
    margin: 0 0 18px;
}

#hamburger-menu a {
    font-size: 0.9rem;
    letter-spacing: 0.04em;
}

#hamburger-menu > nav:last-child {
    margin-top: 55px;

    display: flex;
    gap: 18px;
}

#hamburger-menu > nav:last-child a {
    display: inline-flex;
}

#hamburger-menu svg {
    color: #000;
}


/* =========================================================
   4. GENERAL
   ========================================================= */

main {
    width: 100%;
    background: #000;
    color: #fff;
}

main > section {
    width: 100%;
}

main h1,
main h2,
main h3 {
    margin-top: 0;
    font-weight: 400;
}

main p {
    margin-top: 0;
}


/* =========================================================
   5. COLLECTION PAGES
   SILICA / LUCENT / GLYPH
   ========================================================= */



   /* Collection page section order */
main:has(> section:nth-child(2) > div > article) {
    display: flex;
    flex-direction: column;
}

main:has(> section:nth-child(2) > div > article) > section:first-child {
    order: 1;
}

main:has(> section:nth-child(2) > div > article) > section:nth-child(3) {
    order: 2;
}

main:has(> section:nth-child(2) > div > article) > section:nth-child(2) {
    order: 3;
}

/* Collection title */

main > section:first-child:has(h1) {
    padding: 76px 5vw 10px;
}

main > section:first-child:has(h1) h1 {
    margin: 0;

    font-size: clamp(2.5rem, 5vw, 4.5rem);
    line-height: 1;

    letter-spacing: -0.04em;
}

/* Drop 001 */

main > section:nth-child(3) > h2 {
    margin: 0;
    padding: 10px 5vw 24px;

    font-size: 1.4rem;
    font-weight: 400;
}


/* =========================================================
   COLLECTION GRID
   ========================================================= */

main > section:nth-child(3) > div {
    display: grid !important;

    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

    column-gap: 50px !important;
    row-gap: 82px !important;

    width: min(100%, 1080px) !important;

    margin: 0 auto !important;
    padding: 0 30px 85px !important;
}


/* Product cards */

main > section:nth-child(3) > div > article {
    width: 380px;
    max-width: 100%;

    justify-self: center;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
}


/* Collection product interaction */

main > section:nth-child(2) > div > article {
    transition: transform 0.25s ease;
}

main > section:nth-child(2) > div > article > img {
    transition: transform 0.25s ease;
}

main > section:nth-child(2) > div > article:hover {
    transform: translateY(-4px);
}

main > section:nth-child(2) > div > article:hover > img {
    transform: scale(1.015);
}

main > section:nth-child(2) > div > article > a {
    transition: opacity 0.2s ease;
}

main > section:nth-child(2) > div > article:hover > a {
    opacity: 0.65;
}


/* Collection images */

main > section:nth-child(3) > div > article > img {
    width: 100% !important;
    height: 360px !important;

    object-fit: contain;

    display: block;

    margin: 0 0 14px;

    border-radius: 0;
}


/* Product names */

main > section:nth-child(3) > div > article > h3 {
    margin: 0 0 5px;

    font-size: 0.9rem;
    line-height: 1.2;
    font-weight: 400;
}


/* Shop now */

main > section:nth-child(3) > div > article > a {
    display: inline-block;

    margin: 0;
    padding: 0;

    font-size: 0.68rem;
    line-height: 1.4;

    letter-spacing: 0.08em;
    text-transform: uppercase;

    border-bottom: 1px solid currentColor;
}


/* Collection page order */

main:has(> section:nth-child(2) > div > article) {
    display: flex;
    flex-direction: column;
}


/* Collection title */

main:has(> section:nth-child(2) > div > article)
> section:first-child {
    order: 1;

    padding: 76px 5vw 0;
}

main:has(> section:nth-child(2) > div > article)
> section:first-child h1 {
    margin: 0;

    font-size: clamp(2.5rem, 5vw, 4.5rem);
    line-height: 1;
    letter-spacing: -0.04em;
}


/* Collection description */

main:has(> section:nth-child(3) p)
> section:nth-child(3) {
    order: 2;

    padding: 18px 5vw 18px;
}

main:has(> section:nth-child(3) p)
> section:nth-child(3) p {
    width: min(720px, 100%);

    margin: 0;

    font-size: 0.95rem;
    line-height: 1.65;

    color: #fff;
}


/* Products / Drop */

main:has(> section:nth-child(2) > div > article)
> section:nth-child(2) {
    order: 3;
}


/* Drop 001 */

main:has(> section:nth-child(2) > div > article)
> section:nth-child(2) > h2 {
    margin: 0;

    padding: 8px 5vw 20px;

    font-size: 1.4rem;
    line-height: 1.2;
    font-weight: 400;
}


/* ---------------------------------------------------------
   COLLECTION PAGE FOOTER
   --------------------------------------------------------- */

body:has(main > section:first-child > h1) footer {
    display: grid;

    grid-template-columns: 1fr 1.4fr;

    column-gap: 60px;
    row-gap: 24px;

    padding: 38px 5vw 24px;

    background: #fff;
    color: #000;
}

/* SHOP */

body:has(main > section:first-child > h1)
footer > section:first-child {
    grid-column: 1;
}

/* STAY IN THE LOOP */

body:has(main > section:first-child > h1)
footer > section:nth-child(2) {
    grid-column: 2;
}

/* Social icons on divider */

body:has(main > section:first-child:has(h1))
footer > nav[aria-label="Social media"] {
    grid-column: 1 / -1;

    position: relative;

    display: flex;
    justify-content: center;
    align-items: center;

    gap: 18px;

    margin: 4px 0 0;
    padding: 0 14px;

    z-index: 1;
}

body:has(main > section:first-child:has(h1))
footer > nav[aria-label="Social media"]::before {
    content: "";

    position: absolute;

    left: 0;
    right: 0;

    top: 50%;

    height: 1px;

    background: #d6d6d6;

    z-index: -1;
}

body:has(main > section:first-child:has(h1))
footer > nav[aria-label="Social media"] a {
    display: inline-flex;

    padding: 0 10px;

    background: #fff;

    position: relative;
    z-index: 2;
}

/* FOOTER LINKS */

body:has(main > section:first-child > h1)
footer nav[aria-label="Footer navigation"] {
    grid-column: 1 / -1;

    display: flex;
    justify-content: flex-start;
    align-items: center;

    gap: 24px;


    padding-top: 18px;
    margin-top: 0;

    border-top: 1px solid #d6d6d6;
}

/* COPYRIGHT */

body:has(main > section:first-child > h1)
footer > p {
    grid-column: 1 / -1;

    margin: 4px 0 0;

    text-align: left;

    font-size: 0.65rem;
    letter-spacing: 0.08em;
}

/* Collection title and description alignment */

main > section:first-child,
main > section:first-child h1,
main > section:nth-child(3),
main > section:nth-child(3) p {
    text-align: left;
}

main > section:nth-child(3) p {
    margin-left: 0;
    margin-right: 0;
}


/* =========================================================
   6. HOME PAGE
   ========================================================= */



   /* Home Page Nav — Black */
body:has(main > section:first-child > img[src*="csk wordmark"])
header {
    background: #000;
    color: #fff;
}

body:has(main > section:first-child > img[src*="csk wordmark"])
header > nav {
    background: #000;
    color: #fff;
}

body:has(main > section:first-child > img[src*="csk wordmark"])
header > nav button,
body:has(main > section:first-child > img[src*="csk wordmark"])
header > nav a {
    color: #fff;
}

body:has(main > section:first-child > img[src*="csk wordmark"])
header > nav > div:not(#hamburger-menu) img {
    width: 80px !important;
    height: 70px !important;
    max-width: none !important;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

/* White wordmark band */

body:has(main > section:first-child > img[src*="csk wordmark"])
main > section:first-child {
    padding: 0;

    background: #fff;
    color: #000;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
}

body:has(main > section:first-child > img[src*="csk wordmark"])
main > section:first-child img {
    width: min(700px, 82vw) !important;

    height: auto;

    max-width: none;

    margin: 0 auto;
}


/* Black capsule section */

body:has(main > section:first-child > img[src*="csk wordmark"])
main > section:nth-child(2) {
    padding: 90px 24px 120px;

    background: #000;
}

body:has(main > section:first-child > img[src*="csk wordmark"])
main > section:nth-child(2) > h1 {
    display: none;
}


/* Capsules */

body:has(main > section:first-child > img[src*="csk wordmark"])
main > section:nth-child(2) > a {
    display: block;

    width: min(640px, calc(100vw - 48px));
    height: 104px;

    margin: 0 auto 36px;

    background: #fff;
    color: #000;

    border-radius: 999px;

    transition:
        transform 180ms ease,
        box-shadow 180ms ease;
}

body:has(main > section:first-child > img[src*="csk wordmark"])
main > section:nth-child(2) > a:last-child {
    margin-bottom: 0;
}

body:has(main > section:first-child > img[src*="csk wordmark"])
main > section:nth-child(2) > a:hover {
    transform: translateY(-3px);

    box-shadow:
        0 12px 30px rgba(255, 255, 255, 0.12);
}


/* Capsule inner */

body:has(main > section:first-child > img[src*="csk wordmark"])
main > section:nth-child(2) > a > div {
    position: relative;

    width: 100%;
    height: 100%;

    padding: 0 42px;

    display: flex;
    align-items: center;
    justify-content: center;
}


/* Capsule title */

body:has(main > section:first-child > img[src*="csk wordmark"])
main > section:nth-child(2) > a h2 {
    margin: 0;

    font-size: 1.45rem;
    font-weight: 400;

    letter-spacing: 0.22em;
    text-transform: uppercase;
}


/* Capsule arrow */

body:has(main > section:first-child > img[src*="csk wordmark"])
main > section:nth-child(2) > a h2::after {
    content: "→";

    position: absolute;

    right: 42px;
    top: 50%;

    transform: translateY(-50%);

    font-size: 1.8rem;
    font-weight: 300;

    letter-spacing: 0;
}

/* =========================================================
   7. PRODUCT PAGES
   ========================================================= */

body:has(#quantity) main {
    background: #000;
    color: #fff;
}


/* =========================================================
   PRODUCT GALLERY — CSK STYLE
   ========================================================= */

body:has(#quantity) main > section:first-child {
    width: 100%;
    height: 720px;

    margin: 0;
    padding: 55px 0 65px;

    box-sizing: border-box;

    background: #000;

    position: relative;
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;
}


/* Gallery image wrapper */

body:has(#quantity) main > section:first-child > div {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    background: transparent;

    transition:
        opacity 350ms ease,
        transform 350ms ease;
}


/* First image */

body:has(#quantity) main > section:first-child > div:first-child {
    transform: translateX(0);
    opacity: 1;
}


/* Gallery images */

body:has(#quantity) main > section:first-child img {
    display: block !important;

    width: auto !important;
    height: auto !important;

    max-width: 560px !important;
    max-height: 600px !important;

    margin: 0 !important;

    object-fit: contain !important;

    border-radius: 28px !important;

    background: transparent !important;
}



/* =========================================================
   PRODUCT INFORMATION
   ========================================================= */

body:has(#quantity) main > section:nth-child(2) {
    width: 100%;

    padding: 72px 7vw 90px;

    background: #fff;
    color: #111;
}


/* Product name */

body:has(#quantity) main > section:nth-child(2) > h1 {
    margin: 0 0 10px;

    font-size: clamp(2rem, 4vw, 3.5rem);
    line-height: 1.05;

    font-weight: 400;
}


/* Price */

body:has(#quantity) main > section:nth-child(2) > p {
    margin: 0 0 50px;

    font-size: 1rem;
}


/* Information blocks */

body:has(#quantity) main > section:nth-child(2) > div {
    margin: 0 0 34px;
    padding: 0;

    border: 0;
}


/* Labels */

body:has(#quantity) main > section:nth-child(2) label {
    display: block;

    margin: 0 0 12px;

    font-size: 0.72rem;

    letter-spacing: 0.12em;
    text-transform: uppercase;
}


/* Phone model */

body:has(#quantity) #phone-model {
    width: 100%;
    max-width: 520px;

    height: 50px;

    padding: 0 14px;

    background: #fff;
    color: #111;

    border: 1px solid #bdbdbd;
    border-radius: 0;

    outline: none;
}


/* =========================================================
   QUANTITY
   ========================================================= */

body:has(#quantity)
main > section:nth-child(2)
> div:has(#quantity)
> div {
    display: inline-flex;

    align-items: center;

    height: 48px;

    border: 1px solid #c7c7c7;
    border-radius: 0;

    overflow: hidden;
}


/* Quantity buttons */

body:has(#quantity)
main > section:nth-child(2)
> div:has(#quantity)
button {
    width: 48px;
    height: 48px;

    border: 0;

    background: #111;
    color: #fff;

    display: inline-flex;

    align-items: center;
    justify-content: center;
}


/* Quantity number */

body:has(#quantity) #quantity {
    width: 52px;
    height: 48px;

    padding: 0;

    border: 0;

    border-left: 1px solid #c7c7c7;
    border-right: 1px solid #c7c7c7;

    background: #fff;
    color: #111;

    text-align: center;
}


/* Remove number arrows */

body:has(#quantity) #quantity::-webkit-inner-spin-button,
body:has(#quantity) #quantity::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

body:has(#quantity) #quantity {
    -moz-appearance: textfield;
}


/* =========================================================
   ADD TO CART
   ========================================================= */

body:has(#quantity)
main > section:nth-child(2)
> div:has(button:not([aria-label]))
button {
    width: min(520px, 100%);

    min-height: 70px;

    border: 0;
    border-radius: 0;

    background: #111;
    color: #fff;

    font-size: 0.78rem;

    letter-spacing: 0.1em;
    text-transform: uppercase;
}


/* =========================================================
   STOCK
   ========================================================= */

body:has(#quantity)
main > section:nth-child(2)
> div:has(p)
p {
    margin: 0;

    font-size: 0.8rem;
}

body:has(#quantity) [data-stock-status][data-stock="out-of-stock"] {
    color: #9a3434;
}

body:has(#quantity) button:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

body:has(#quantity)
main > section:nth-child(2)
> div:last-child p {
    width: min(680px, 100%);

    margin: 0;

    font-size: 0.95rem;
    line-height: 1.8;
}


/* =========================================================
   PRODUCT PAGE FOOTER
   BLACK
   ========================================================= */


body:has(#quantity) footer {
    display: block;

    background: #000;
    color: #fff;

    border-top: 0;

    padding: 55px 5vw 24px;
}


/* Footer content */

body:has(#quantity) footer > * {
    width: 100%;
}


/* Footer navigation divider */

body:has(#quantity) footer nav[aria-label="Footer navigation"]  {
    border-top: 1px solid rgba(255, 255, 255, 0.35);

    margin-top: 38px;
    padding-top: 22px;
}


/* Footer navigation links */

body:has(#quantity) footer nav ul {
    display: flex;

    justify-content: center;
    align-items: center;

    flex-wrap: wrap;

    gap: 24px;

    margin: 0;
    padding: 0;

    list-style: none;
}


/* Copyright */

body:has(#quantity) footer small {
    display: block;

    margin-top: 22px;

    text-align: center;
}


/* =========================================================
   8. ABOUT PAGE
   ========================================================= */

.about-hero,
.about-vision,
.about-mission,
.about-collections,
.about-community {
    background: #000;
    color: #fff;
}


/* Hero */

.about-hero {
    padding: 100px 8vw 90px;
}

.about-hero h1 {
    margin: 0 0 18px;

    font-size: clamp(2.5rem, 6vw, 5rem);
    line-height: 1;
}

.about-tagline {
    margin: 0 0 36px;

    font-size: 0.75rem;
    letter-spacing: 0.18em;
}

.about-intro {
    width: min(720px, 100%);

    margin: 0;

    font-size: 1rem;
    line-height: 1.8;
}


/* Vision / Mission / Collections */

.about-vision,
.about-mission,
.about-collections {
    padding: 75px 8vw;
    text-align: left;
}

.about-vision h2,
.about-mission h2,
.about-collections h2 {
    margin: 0 0 28px;

    font-size: 1rem;
    letter-spacing: 0.14em;

    text-align: left;
}

.about-vision p,
.about-mission p {
    width: min(760px, 100%);

    margin: 0;
    padding: 0;

    font-size: 1rem;
    line-height: 1.9;

    text-align: left;
}


/* Collections */

.collection-info {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 55px;
}

.about-collection {
    margin: 0;
}

.about-collection h3 {
    margin: 0 0 7px;

    font-size: 1rem;

    letter-spacing: 0.12em;
}

.about-collection .collection-category {
    margin: 0 0 18px;

    font-size: 0.68rem;

    letter-spacing: 0.16em;
}

.about-collection > p:last-child {
    margin: 0;

    font-size: 0.9rem;
    line-height: 1.8;
}


/* Community */

.about-community {
    padding: 90px 8vw 110px;
}

.about-community-line {
    margin: 0 0 14px;

    font-size: 0.68rem;
    letter-spacing: 0.18em;
}

.about-community h2 {
    margin: 0;

    font-size: 0.68rem;
    line-height: 1.4;
    font-weight: 400;

    letter-spacing: 0.18rem;
}


/* =========================================================
   9. CONTACT PAGE
   ========================================================= */

body:has(#name) main {
    background: #000;
    color: #fff;
}

body:has(#name) main > section {
    padding: 85px 8vw;
}

body:has(#name) main > section:first-child {
    padding-bottom: 45px;
}

body:has(#name) main > section:first-child h1 {
    margin: 0 0 18px;

    font-size: clamp(2.5rem, 6vw, 5rem);
    line-height: 1;
}

body:has(#name) main > section:first-child p {
    width: min(650px, 100%);

    margin: 0;

    line-height: 1.8;
}


/* Contact methods */

body:has(#name) main > section:nth-child(2) {
    padding-top: 35px;
}

body:has(#name) main > section:nth-child(2) h2,
body:has(#name) main > section:nth-child(3) h2 {
    margin: 0 0 34px;

    font-size: 0.9rem;
    letter-spacing: 0.15em;
}


/* Contact method rows */

body:has(#name)
main > section:nth-child(2)
> div {
    display: flex;

    align-items: center;

    gap: 18px;

    margin: 0 0 22px;
    padding: 0;

    border: 0;
}

body:has(#name)
main > section:nth-child(2)
> div a {
    display: inline-flex;

    align-items: center;

    gap: 18px;
}

body:has(#name)
main > section:nth-child(2)
svg {
    width: 25px;
    height: 25px;

    flex: 0 0 25px;

    color: #fff;
}

body:has(#name)
main > section:nth-child(2)
span {
    display: block;

    font-size: 0.9rem;
    line-height: 1.3;
}


/* =========================================================
   CONTACT FORM
   ========================================================= */

body:has(#name)
main > section:nth-child(3) {
    padding-top: 35px;
}

body:has(#name)
main > section:nth-child(3)
form {
    width: min(760px, 100%);
}

body:has(#name)
main > section:nth-child(3)
form > div {
    margin: 0 0 30px;
    padding: 0;

    border: 0;
}

body:has(#name)
main > section:nth-child(3)
label {
    display: block;

    margin: 0 0 10px;

    font-size: 0.7rem;

    letter-spacing: 0.12em;
    text-transform: uppercase;
}

body:has(#name)
main > section:nth-child(3)
input,
body:has(#name)
main > section:nth-child(3)
textarea {
    width: 100%;

    padding: 15px 0;

    background: transparent;
    color: #fff;

    border: 0;

    border-bottom: 1px solid #777;

    outline: none;

    border-radius: 0;
}

body:has(#name)
main > section:nth-child(3)
textarea {
    min-height: 170px;

    resize: vertical;
}

body:has(#name)
main > section:nth-child(3)
input::placeholder,
body:has(#name)
main > section:nth-child(3)
textarea::placeholder {
    color: #999;
}

body:has(#name)
main > section:nth-child(3)
button {
    min-width: 190px;
    min-height: 56px;

    padding: 0 26px;

    border: 0;

    background: #fff;
    color: #000;

    font-size: 0.72rem;

    letter-spacing: 0.1em;
}


/* =========================================================
   10. FAQ / TERMS / PRIVACY / SHIPPING
   ========================================================= */

body:has(main > section > h1:not(:empty)) main {
    background: #000;
    color: #fff;
}


/* No automatic borders on sections */

main > section {
    border: 0;
}


/* Main heading */

body:has(main h1)
main > section:first-child {
    padding: 85px 8vw 55px;
}

body:has(main h1)
main > section:first-child h1 {
    margin: 0 0 18px;

    font-size: clamp(2.5rem, 6vw, 5rem);
    line-height: 1;
}

body:has(main h1)
main > section:first-child p {
    width: min(680px, 100%);

    margin: 0;
}


/* Document sections */

body:has(main h2)
main > section:not(:first-child) {
    padding: 55px 8vw;
}

body:has(main h2)
main > section h2 {
    margin: 0 0 24px;

    font-size: 1rem;

    line-height: 1.3;

    letter-spacing: 0.12em;

    font-weight: 400;
}


/* Paragraphs */

body:has(main h2)
main > section p {
    width: min(780px, 100%);

    margin: 0 0 18px;

    font-size: 0.94rem;

    line-height: 1.85;
}


/* Lists */

body:has(main h2)
main > section ul {
    width: min(780px, 100%);

    margin: 0 0 20px;

    padding-left: 22px;

    list-style: disc;
}

body:has(main h2)
main > section li {
    margin: 0 0 8px;
    padding: 0;

    border: 0;
}


/* FAQ articles */

body:has(main h2)
main > section article {
    width: min(800px, 100%);

    margin: 0 0 34px;
    padding: 0;

    border: 0;
}

body:has(main h2)
main > section article h3 {
    margin: 0 0 10px;

    font-size: 0.95rem;

    font-weight: 400;
}

body:has(main h2)
main > section article p {
    margin: 0;
}


/* Links */

main a {
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}


/* =========================================================
   11. CART / CHECKOUT / ACCOUNT
   ========================================================= */

#cart-items,
#empty-cart,
#cart-summary,
#checkout-form,
#sign-in,
#create-account,
#forgot-password,
#orders,
#details,
#address,
#security {
    border: 0;
}

body:has(#cart-items) main,
body:has(#checkout-form) main,
body:has(#sign-in) main {
    background: #000;
    color: #fff;
}

body:has(#cart-items) main > section,
body:has(#checkout-form) main > section,
body:has(#sign-in) main > section {
    padding: 70px 7vw;
}

body:has(#cart-items) input,
body:has(#checkout-form) input,
body:has(#checkout-form) select,
body:has(#checkout-form) textarea,
body:has(#sign-in) input {
    background: transparent;
    color: inherit;

    border: 1px solid #666;
    border-radius: 0;
}

body:has(#cart-items) button,
body:has(#checkout-form) button,
body:has(#sign-in) button {
    border: 0;
    border-radius: 0;
}


/* =========================================================
   12. FOOTER
   WHITE BY DEFAULT
   ========================================================= */

footer {
    position: relative;

    width: 100%;

    padding: 32px 3vw 26px;

    background: #fff;
    color: #000;

    border-top: 0;
}


/* Footer sections */

footer > section {
    margin: 0;
}

footer h3 {
    margin: 0 0 16px;

    font-size: 0.72rem;

    line-height: 1.2;

    letter-spacing: 0.16em;

    text-transform: uppercase;
}

footer p {
    margin: 0 0 16px;
}

footer ul {
    list-style: none;
}

footer li {
    margin: 0 0 7px;
}

footer a {
    color: inherit;
}


/* Newsletter */

footer form {
    display: flex;

    width: min(330px, 100%);
}

footer form label {
    position: absolute;

    width: 1px;
    height: 1px;

    overflow: hidden;

    clip: rect(0 0 0 0);
}

footer form input {
    flex: 1;

    min-width: 0;

    height: 46px;

    padding: 0 14px;

    background: transparent;

    color: #000;

    border: 1px solid #bcbcbc;

    border-right: 0;

    border-radius: 0;
}

footer form input::placeholder {
    color: #777;
}

footer form button {
    width: 52px;
    height: 46px;

    border: 1px solid #bcbcbc;

    background: #fff;
    color: #000;
}


/* Social icons */

footer nav[aria-label="Social media"] {
    display: flex;

    align-items: center;

    gap: 18px;
}

footer nav[aria-label="Social media"] a {
    display: inline-flex;
}

footer nav[aria-label="Social media"] svg {
    color: currentColor;
}


/* Footer navigation */

footer nav[aria-label="Footer navigation"] {
    display: flex;

    flex-wrap: wrap;

    gap: 18px 26px;
}

footer nav[aria-label="Footer navigation"] a {
    font-size: 0.72rem;
}


/* Copyright */

footer > p {
    margin: 28px 0 0;

    font-size: 0.68rem;

    letter-spacing: 0.08em;
}


/* =========================================================
   HOME FOOTER
   ========================================================= */

body:has(main > section:first-child > img[src*="csk wordmark"])
footer {
    display: grid;

    grid-template-columns: 1fr 1fr 1fr 1.6fr;

    column-gap: 50px;
    row-gap: 28px;

    padding: 20px 4vw 10px;

    background: #fff;
    color: #000;
}


/* -----------------------------------------
   TOP FOOTER COLUMNS
   SHOP / INFO / LEGAL / NEWSLETTER
   ----------------------------------------- */

body:has(main > section:first-child > img[src*="csk wordmark"])
footer > section:nth-child(1),
body:has(main > section:first-child > img[src*="csk wordmark"])
footer > section:nth-child(2),
body:has(main > section:first-child > img[src*="csk wordmark"])
footer > section:nth-child(3),
body:has(main > section:first-child > img[src*="csk wordmark"])
footer > section:nth-child(4) {
    margin: 0;
}


/* Newsletter spacing */

body:has(main > section:first-child > img[src*="csk wordmark"])
footer > section:nth-child(4) {
    display: flex;
    flex-direction: column;
    gap: 10px;
}


/* -----------------------------------------
   SOCIAL ICONS
   ----------------------------------------- */

body:has(main > section:first-child > img[src*="csk wordmark"])
footer > section:nth-child(5) {
    grid-column: 1 / -1;

    display: flex;
    justify-content: flex-start;
    align-items: center;

    margin: 15px 0 0;

    position: relative;
}

/* Divider behind the icons */

body:has(main > section:first-child > img[src*="csk wordmark"])
footer > section:nth-child(5)::before {
    content: "";

    position: absolute;

    left: 0;
    right: 0;

    top: calc(50% + 9px);

    height: 1px;

    background: #d9d9d9;
}

/* Keep the icons sitting cleanly on top of the divider */

body:has(main > section:first-child > img[src*="csk wordmark"])
footer > section:nth-child(5) nav[aria-label="Social media"] {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;

    gap: 18px;

    padding: 0 12px;

    background: #fff;
}


/* -----------------------------------------
   COPYRIGHT + MADE TO BE SEEN
   ----------------------------------------- */

body:has(main > section:first-child > img[src*="csk wordmark"])
footer > section:nth-child(6) {
    grid-column: 1 / -1;

    display: flex;
    justify-content: center;
    align-items: center;

    gap: 24px;

    margin: 0;
}





body:has(main > section:first-child > img[src*="csk wordmark"])
footer > section:nth-child(6) p {
    margin: 0;
}





/* =========================================================
   PRODUCT FOOTER OVERRIDE
   BLACK
   ========================================================= */

body:has(#quantity) footer {
    background: #000;
    color: #fff;

    border-top: 0;
}

body:has(#quantity) footer form input {
    color: #fff;

    background: transparent;

    border-color: #555;
}

body:has(#quantity) footer form input::placeholder {
    color: #999;
}

body:has(#quantity) footer form button {
    background: #000;
    color: #fff;

    border-color: #555;
}


/* =========================================================
   13. MOBILE
   ========================================================= */

@media (max-width: 800px) {

    /* Header */

    header > nav {
        min-height: 68px;

        padding: 0 16px;
    }

    header > nav > button[aria-label="Open search"] {
        right: 86px;
        top: 17px;
    }

    header > nav > a[aria-label="Open CSK Icon Account"] {
        right: 46px;
        top: 17px;
    }

    header > nav > a[aria-label^="Open shopping bag"] {
        right: 7px;
        top: 17px;
    }

    header > nav > div:not(#hamburger-menu) img {
        width: 42px !important;
        height: 42px !important;
    }


    /* Hamburger */

    #hamburger-menu {
        top: 68px;

        min-height: calc(100vh - 68px);
    }


    /* Collection title */

    main > section:first-child:has(h1) {
        padding: 58px 24px 25px;
    }

    main > section:first-child:has(h1) h1 {
        font-size: 2.5rem;
    }

    main > section:nth-child(2) > h2 {
        padding: 20px 24px 30px;
    }


    /* Collection grid */

    main:has(> section:nth-child(2) > div > article)
    > section:nth-child(2) > div,
    main:has(> section:nth-child(3) > div > article)
    > section:nth-child(3) > div {
        grid-template-columns: 1fr !important;

        gap: 60px !important;

        padding: 0 24px 70px !important;
    }

    main > section:nth-child(2) > div > article {
        width: min(380px, 100%);
    }

    main > section:nth-child(2) > div > article > img {
        height: auto !important;

        aspect-ratio: 1 / 1;
    }

    main > section:nth-child(3) {
        padding: 0 24px 70px;
    }


    /* Home capsules */

    body:has(main > section:first-child > img[src*="csk wordmark"])
    main > section:nth-child(2) {
        padding: 65px 16px 80px;
    }

    body:has(main > section:first-child > img[src*="csk wordmark"])
    main > section:nth-child(2) > a {
        width: min(640px, calc(100vw - 32px));

        height: 82px;

        margin-bottom: 24px;
    }

    body:has(main > section:first-child > img[src*="csk wordmark"])
    main > section:nth-child(2) > a > div {
        padding: 0 30px;
    }

    body:has(main > section:first-child > img[src*="csk wordmark"])
    main > section:nth-child(2) > a h2 {
        font-size: 1rem;

        letter-spacing: 0.18em;
    }

    body:has(main > section:first-child > img[src*="csk wordmark"])
    main > section:nth-child(2) > a h2::after {
        right: 28px;

        font-size: 1.4rem;
    }


    /* Product gallery */

    body:has(#quantity)
    main > section:first-child {
        padding: 35px 18px 45px;
    }

    body:has(#quantity)
    main > section:first-child img {
        max-width: 100% !important;

        height: auto;

        aspect-ratio: 1 / 1;

        border-radius: 22px;
    }


    /* Product information */

    body:has(#quantity)
    main > section:nth-child(2) {
        padding: 52px 24px 65px;
    }

    body:has(#quantity)
    main > section:nth-child(2) > h1 {
        font-size: 2.3rem;
    }


    /* About */

    .about-hero,
    .about-vision,
    .about-mission,
    .about-collections,
    .about-community {
        padding-left: 24px;
        padding-right: 24px;
    }

    .collection-info {
        grid-template-columns: 1fr;

        gap: 45px;
    }


    /* Contact */

    body:has(#name)
    main > section {
        padding-left: 24px;
        padding-right: 24px;
    }


    /* Document pages */

    body:has(main h2)
    main > section:first-child,

    body:has(main h2)
    main > section:not(:first-child) {
        padding-left: 24px;
        padding-right: 24px;
    }


    /* Footer */

    footer {
        padding: 50px 24px 30px;
    }

    body:has(main > section:first-child > img[src*="csk wordmark"])
    footer {
        grid-template-columns: 1fr 1fr;

        gap: 38px 28px;
    }

    body:has(main > section:first-child > img[src*="csk wordmark"])
    footer > section:nth-child(3) {
        grid-column: 1 / -1;
    }

    body:has(main > section:first-child > img[src*="csk wordmark"])
    footer > section:nth-child(4) {
        grid-column: 1 / -1;
    }

    body:has(main > section:first-child > img[src*="csk wordmark"])
    footer > p {
        grid-column: 1 / -1;
    }

    footer nav[aria-label="Footer navigation"] {
        gap: 12px 18px;
    }
}



/* =========================================================
   ALIGNMENT FIX
   ========================================================= */

.about-vision,
.about-mission,
.about-collections {
    padding-left: 8vw !important;
    padding-right: 8vw !important;
}

.about-vision h2,
.about-mission h2,
.about-collections h2,
.about-vision p,
.about-mission p {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* =========================================================
   FAQ — PRODUCTS ALIGNMENT
   ========================================================= */

main > section:has(> h2):has(> article:nth-of-type(5)) {
    padding-left: 8vw !important;
    padding-right: 8vw !important;
    text-align: left !important;
}

main > section:has(> h2):has(> article:nth-of-type(5)) > h2 {
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
}

main > section:has(> h2):has(> article:nth-of-type(5)) > article {
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
}

/* =========================================================
   SHIPPING & RETURNS — CANCELLATIONS ALIGNMENT
   ========================================================= */

main > section:has(> h2):has(> p:nth-of-type(3)) {
    padding-left: 8vw !important;
    padding-right: 8vw !important;
    text-align: left !important;
}

main > section:has(> h2):has(> p:nth-of-type(3)) > h2 {
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
}

main > section:has(> h2):has(> p:nth-of-type(3)) > p {
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
}

/* =========================================================
   PRIVACY POLICY — INFORMATION WE COLLECT ALIGNMENT
   ========================================================= */

main > section:has(> h2):has(> ul) {
    padding-left: 8vw !important;
    padding-right: 8vw !important;
    text-align: left !important;
}

main > section:has(> h2):has(> ul) > h2 {
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
}

main > section:has(> h2):has(> ul) > p,
main > section:has(> h2):has(> ul) > ul {
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
}

/* =========================================================
   ACCOUNT PAGE — VISUAL STYLING
   ========================================================= */

body:has(#sign-in) main {
    background: #000;
    color: #fff;
}

/* Account sections */

body:has(#sign-in) main > section {
    padding: 70px 8vw;
}

/* Account header */

body:has(#sign-in) main > section:first-child {
    padding-top: 85px;
    padding-bottom: 55px;
}

body:has(#sign-in) main > section:first-child h1 {
    margin: 0 0 18px;
    font-size: clamp(2.5rem, 6vw, 5rem);
    line-height: 1;
    font-weight: 400;
}

body:has(#sign-in) main > section:first-child p {
    width: min(680px, 100%);
    margin: 0;
    line-height: 1.8;
}

/* Account action choices */

body:has(#sign-in) main > section:nth-child(2) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 70px;
}

body:has(#sign-in) main > section:nth-child(2) > div {
    padding: 0;
}

body:has(#sign-in) main > section:nth-child(2) h2 {
    margin: 0 0 14px;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.12em;
}

body:has(#sign-in) main > section:nth-child(2) p {
    margin: 0 0 20px;
    line-height: 1.8;
}

body:has(#sign-in) main > section:nth-child(2) a {
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* Forms */

body:has(#sign-in) form {
    width: min(560px, 100%);
}

body:has(#sign-in) form > div {
    margin-bottom: 26px;
}

body:has(#sign-in) form label {
    display: block;
    margin-bottom: 10px;
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

body:has(#sign-in) form input {
    width: 100%;
    height: 48px;
    padding: 0 12px;
    background: transparent;
    color: #fff;
    border: 1px solid #666;
    border-radius: 0;
}

body:has(#sign-in) form button {
    min-height: 48px;
    padding: 0 24px;
    background: #fff;
    color: #000;
    border: 0;
    border-radius: 0;
    font-size: 0.68rem;
    letter-spacing: 0.12em;
}

body:has(#sign-in) form > a {
    display: inline-block;
    margin-top: 20px;
    font-size: 0.68rem;
    letter-spacing: 0.1em;
}

/* Account dashboard */

#account-dashboard > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    width: min(800px, 100%);
}

#account-dashboard > div > .account-dashboard-card {
    padding: 24px 0;
    border-top: 1px solid #444;
}

#account-dashboard h3 {
    margin: 0 0 8px;
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    font-weight: 400;
}

#account-dashboard p {
    margin: 0;
    line-height: 1.6;
}

#logout-button {
    margin-top: 35px;
    padding: 14px 24px;
    background: transparent;
    color: #fff;
    border: 1px solid #666;
    border-radius: 0;
    font-size: 0.68rem;
    letter-spacing: 0.12em;
}


/* =========================================================
   CART PAGE — VISUAL STYLING
   ========================================================= */

body:has(#cart-items) main {
    background: #000;
    color: #fff;
}

/* Cart sections */

body:has(#cart-items) main > section {
    padding: 70px 8vw;
}

/* Cart header */

body:has(#cart-items) main > section:first-child {
    padding-top: 85px;
    padding-bottom: 55px;
}

body:has(#cart-items) main > section:first-child h1 {
    margin: 0 0 18px;
    font-size: clamp(2.5rem, 6vw, 5rem);
    line-height: 1;
    font-weight: 400;
}

body:has(#cart-items) main > section:first-child p {
    margin: 0;
    line-height: 1.8;
}

/* Empty cart */

#empty-cart {
    width: min(720px, 100%);
}

#empty-cart h2 {
    margin: 0 0 14px;
    font-size: 1rem;
    letter-spacing: 0.12em;
    font-weight: 400;
}

#empty-cart > p {
    margin: 0 0 28px;
    line-height: 1.8;
}

#empty-cart ul {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

#empty-cart li {
    margin: 0;
}

#empty-cart a {
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Cart summary */

#cart-summary {
    width: min(720px, 100%);
}

#cart-summary h2,
body:has(#cart-items) main > section:last-child h2 {
    margin: 0 0 24px;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.12em;
}

#cart-summary > div {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    padding: 18px 0;
    border-top: 1px solid #444;
    border-bottom: 1px solid #444;
}

#cart-summary > p {
    margin: 18px 0 28px;
    line-height: 1.7;
    font-size: 0.85rem;
}

#cart-summary > a {
    display: inline-block;
    margin-right: 24px;
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Additional notes */

body:has(#cart-items) main > section:last-child label {
    display: block;
    margin-bottom: 12px;
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

body:has(#cart-items) main > section:last-child textarea {
    display: block;
    width: min(720px, 100%);
    min-height: 150px;
    padding: 14px;
    background: transparent;
    color: #fff;
    border: 1px solid #666;
    border-radius: 0;
    resize: vertical;
}

/* =========================================================
   CHECKOUT PAGE — FINAL VISUAL STYLING
   ========================================================= */

body:has(#checkout-form) main {
    background: #000;
    color: #fff;
}

/* Checkout header */

body:has(#checkout-form) main > section:first-child {
    padding: 85px 8vw 55px;
}

body:has(#checkout-form) main > section:first-child h1 {
    margin: 0 0 18px;
    font-size: clamp(2.5rem, 6vw, 5rem);
    line-height: 1;
    font-weight: 400;
}

body:has(#checkout-form) main > section:first-child p {
    margin: 0;
    line-height: 1.8;
}

/* Checkout form */

#checkout-form {
    width: min(850px, 100%);
    margin: 0;
}

/* Form sections */

#checkout-form fieldset {
    margin: 0 0 55px;
    padding: 0 0 55px;
    border: 0;
    border-bottom: 1px solid #333;
}

#checkout-form fieldset:nth-of-type(1),
#checkout-form fieldset:nth-of-type(2),
#checkout-form .csk-checkout-agreement {
    border-bottom: 0;
}

/* Section titles */

#checkout-form legend {
    width: 100%;
    margin: 0 0 28px;
    padding: 0;
    font-size: 0.75rem;
    line-height: 1.3;
    letter-spacing: 0.16em;
    font-weight: 400;
}

/* Form fields */

#checkout-form fieldset > div {
    margin: 0 0 24px;
}

#checkout-form label {
    display: block;
    margin: 0 0 9px;
    font-size: 0.68rem;
    line-height: 1.4;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Inputs and textareas */

#checkout-form input:not([type="checkbox"]),
#checkout-form textarea,
#checkout-form select {
    display: block;
    width: 100%;
    box-sizing: border-box;

    background: transparent;
    color: #fff;

    border: 1px solid #555;
    border-radius: 0;

    padding: 13px 14px;

    font: inherit;
}

#checkout-form input:not([type="checkbox"]) {
    height: 48px;
}

#checkout-form textarea {
    min-height: 110px;
    resize: vertical;
}

#checkout-form input:not([type="checkbox"]):focus,
#checkout-form textarea:focus,
#checkout-form select:focus {
    outline: none;
    border-color: #fff;
}

/* Placeholder */

#checkout-form textarea::placeholder,
#checkout-form input::placeholder {
    color: #777;
}

/* Order summary */

#checkout-items {
    margin: 0 0 24px;
}

#checkout-form .csk-discount-entry {
    max-width: 520px;
    margin: 22px 0 12px;
}

#checkout-form .csk-discount-entry label {
    display: block;
    margin-bottom: 8px;
}

#checkout-form .csk-discount-controls {
    display: flex;
    align-items: stretch;
    gap: 12px;
}

#checkout-form .csk-discount-controls input {
    min-width: 0;
    flex: 1;
}

#checkout-form #discount-apply {
    min-height: 48px;
    padding: 0 22px;
    background: #f7f4eb;
    color: #292929;
    cursor: pointer;
}

#checkout-form #discount-apply:disabled {
    opacity: 0.6;
    cursor: wait;
}

#checkout-form #discount-message {
    min-height: 1.4em;
    margin: 8px 0 0;
    color: #c9c4b9;
    font-size: 0.8rem;
}

#checkout-form #discount-message[data-type="error"] {
    color: #f2c5b9;
}

#checkout-form #discount-message[data-type="success"] {
    color: #dce3d3;
}

#checkout-form fieldset:nth-of-type(3) > div:not(#checkout-items) {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;

    padding: 18px 0;

    border-top: 0;
}

#checkout-form fieldset:nth-of-type(3) > div.csk-discount-entry {
    display: block;
    padding: 8px 0;
    border-top: 0;
}

#checkout-form fieldset:nth-of-type(3) > p {
    margin: 20px 0 0;
    max-width: 650px;

    font-size: 0.78rem;
    line-height: 1.7;
    color: #aaa;
}

/* Agreement */

#checkout-form .csk-checkout-agreement > div {
    margin: 0;
}

#checkout-form .csk-checkout-agreement label {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    margin: 0;

    font-size: 0.75rem;
    line-height: 1.7;
    letter-spacing: 0;
    text-transform: none;
}

#terms-agreement {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    margin: 2px 0 0;
    accent-color: #fff;
}

#checkout-form .csk-checkout-agreement a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Payment */

#checkout-form .csk-payment > p {
    width: min(650px, 100%);
    margin: 0 0 28px;

    font-size: 0.85rem;
    line-height: 1.8;
    color: #aaa;
}

#checkout-form .csk-payment button {
    min-height: 50px;
    padding: 0 28px;

    background: #fff;
    color: #000;

    border: 0;
    border-radius: 0;

    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;

    cursor: pointer;
}

/* Return to cart */

body:has(#checkout-form) main > section:last-child a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 0 28px;
    background: #fff;
    color: #000;
    border: 0;
    text-decoration: none;
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

body:has(#checkout-form) main > section:last-child a:hover {
    background: #ddd;
}

/* Mobile */

@media (max-width: 700px) {

    body:has(#checkout-form) main > section:first-child,
    body:has(#checkout-form) main > section:last-child {
        padding-left: 24px;
        padding-right: 24px;
    }

    body:has(#checkout-form) main > section:first-child {
        padding-top: 65px;
    }

    body:has(#checkout-form) main > section:nth-child(2) {
        padding-left: 24px;
        padding-right: 24px;
    }

    #checkout-form fieldset {
        margin-bottom: 42px;
        padding-bottom: 42px;
    }
}

input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    margin: 0 8px 0 0 !important;
    padding: 0 !important;
}

/* =========================================================
   COLLECTION PAGES — TOP SECTION
   ========================================================= */


/* COLLECTION TITLE */

main:has(> section:nth-child(2) > div > article) > section:first-child,
main:has(> section:nth-child(3) > div > article) > section:first-child {

    padding: 80px 5vw 0 !important;
    margin: 0 !important;
}


main:has(> section:nth-child(2) > div > article) > section:first-child h1,
main:has(> section:nth-child(3) > div > article) > section:first-child h1 {

    margin: 0 !important;

    font-size: clamp(3rem, 6vw, 5.5rem) !important;
    line-height: 0.95 !important;

    font-weight: 400 !important;
    letter-spacing: -0.05em !important;
}


/* COLLECTION DESCRIPTION */

main:has(> section:nth-child(2) > div > article) > section:nth-child(2),
main:has(> section:nth-child(3) > div > article) > section:nth-child(2) {

    padding: 35px 5vw 45px !important;
    margin: 0 !important;
}


main:has(> section:nth-child(2) > div > article) > section:nth-child(2) p,
main:has(> section:nth-child(3) > div > article) > section:nth-child(2) p {

    width: min(720px, 100%) !important;

    margin: 0 !important;

    font-size: 0.9rem !important;
    line-height: 1.65 !important;

    font-weight: 400 !important;
}


/* DROP 001 */

main:has(> section:nth-child(2) > div > article) > section:nth-child(3) > h2,
main:has(> section:nth-child(3) > div > article) > section:nth-child(3) > h2 {

    margin: 0 !important;

    padding: 0 5vw 25px !important;

    font-size: 1.4rem !important;
    line-height: 1.2 !important;

    font-weight: 400 !important;
}

/* =========================================================
   COLLECTION PAGES — PRODUCT IMAGE HOVER
   ========================================================= */

main:has(> section:nth-child(2) > div > article) > section:nth-child(3) article img,
main:has(> section:nth-child(3) > div > article) > section:nth-child(3) article img {
    transition: transform 0.35s ease;
}

main:has(> section:nth-child(2) > div > article) > section:nth-child(3) article:hover img,
main:has(> section:nth-child(3) > div > article) > section:nth-child(3) article:hover img {
    transform: scale(1.03);
}

/* =========================================================
   HOME PAGE — HAMBURGER MENU
   ========================================================= */

body:has(main > section:first-child > img[src*="csk wordmark"])
#hamburger-menu {
    color: #000 !important;
}

body:has(main > section:first-child > img[src*="csk wordmark"])
#hamburger-menu a {
    color: #000 !important;
}

body:has(main > section:first-child > img[src*="csk wordmark"])
#hamburger-menu svg {
    color: #000 !important;
}

/* =========================================================
   SEARCH INTERFACE
   ========================================================= */

#csk-search-panel {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 9999;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition: opacity 0.3s ease, visibility 0.3s ease;
}

#csk-search-panel.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


/* Search box */

.csk-search-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;

    background: #ffffff;
    padding: 50px 7vw 60px;

    box-sizing: border-box;

    transform: translateY(-20px);
    transition: transform 0.3s ease;
}

#csk-search-panel.is-open .csk-search-box {
    transform: translateY(0);
}


/* Close button */

.csk-search-close {
    position: absolute;
    top: 30px;
    right: 7vw;

    border: none;
    background: none;

    font-size: 30px;
    font-weight: 300;

    cursor: pointer;

    padding: 0;
    line-height: 1;
}


/* SEARCH label */

.csk-search-box label {
    display: block;

    margin-bottom: 18px;

    font-size: 12px;
    letter-spacing: 0.18em;
    font-weight: 500;
}


/* Search input */

#csk-search-input {
    width: 100%;

    border: none;
    border-bottom: 1px solid #111111;

    background: transparent;

    padding: 12px 0;

    font-family: inherit;
    font-size: 24px;
    font-weight: 400;

    outline: none;

    box-sizing: border-box;
}

#csk-search-input::placeholder {
    color: #999999;
    opacity: 1;
}


/* Search results */

#csk-search-results {
    margin-top: 30px;
}


/* Mobile */

@media (max-width: 768px) {

    .csk-search-box {
        padding: 40px 25px 45px;
    }

    .csk-search-close {
        top: 25px;
        right: 25px;
    }

    #csk-search-input {
        font-size: 20px;
    }

}

/* =========================================================
   PRODUCT GALLERY — FINAL
   ========================================================= */

body:has(#quantity) main {
    background: #fff !important;
}


/* BLACK GALLERY AREA */

body:has(#quantity) main > section:first-child {
    width: 100% !important;
    height: 680px !important;

    margin: 0 !important;
    padding: 85px 0 70px !important;

    box-sizing: border-box;

    background: #000 !important;

    position: relative;
    overflow: hidden;
}


/* GALLERY SLIDES */

body:has(#quantity) main > section:first-child > div {
    position: absolute !important;

    top: 85px !important;
    left: 0 !important;

    width: 100% !important;
    height: calc(100% - 155px) !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    background: transparent !important;
}


/* ACTIVE IMAGE */

body:has(#quantity) main > section:first-child > div:first-child {
    opacity: 1;
}


/* GALLERY IMAGE */

body:has(#quantity) main > section:first-child img {
    display: block !important;

    width: auto !important;
    max-width: 520px !important;

    height: 540px !important;

    margin: 0 auto !important;

    object-fit: contain !important;

    background: transparent !important;

    border-radius: 18px !important;
}


/* PRODUCT INFORMATION */

body:has(#quantity) main > section:nth-child(2) {
    width: 100% !important;

    box-sizing: border-box;

    background: #fff !important;
    color: #111 !important;

    padding: 72px 7vw 90px !important;

    margin: 0 !important;
}



/* =========================================================
   END
   ========================================================= */
/* Account page state and form feedback */
body:has(#sign-in) main > section[hidden] {
    display: none !important;
}

body:has(#sign-in) .csk-form-message {
    margin: 20px 0 0;
    font-size: 0.85rem;
    line-height: 1.6;
}

body:has(#sign-in) .csk-form-message[data-type="error"] {
    color: #ffb4ad;
}

body:has(#sign-in) .csk-form-message[data-type="status"] {
    color: #fff;
}
/* Cart items and navbar count */
a[aria-label^="Open shopping bag"] {
    overflow: visible;
}

.csk-cart-count {
    position: absolute;
    top: -3px;
    right: -4px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #000;
    color: #fff;
    font-size: 10px;
    line-height: 1;
}

body:has(#cart-items) main > section[hidden] {
    display: none !important;
}

#cart-items {
    width: min(900px, 100%);
}

.csk-cart-item {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr) auto;
    align-items: start;
    gap: 28px;
    padding: 24px 0;
    border-top: 1px solid #444;
}

.csk-cart-item > img {
    width: 150px;
    height: 150px;
    object-fit: contain;
    background: #111;
}

.csk-cart-item-details h3 {
    margin: 0 0 8px;
    font-size: 0.95rem;
    font-weight: 400;
}

.csk-cart-item-details p {
    margin: 0 0 8px;
    font-size: 0.82rem;
}

.csk-cart-item-details .csk-cart-unit-price {
    color: #aaa;
    font-size: 0.75rem;
}

.csk-cart-line-price {
    margin: 0;
    font-size: 0.9rem;
}

.csk-cart-controls {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-top: 10px;
}

.csk-cart-controls button,
.csk-cart-remove {
    padding: 4px 8px;
    background: transparent;
    color: inherit;
    border: 1px solid #666;
}

.csk-cart-remove {
    display: block;
    margin-top: 14px;
    padding: 0;
    border: 0;
    border-bottom: 1px solid currentColor;
    font-size: 0.68rem;
}

#cart-actions a[aria-disabled="true"] {
    opacity: 0.4;
    pointer-events: none;
}

.csk-cart-message {
    margin: 14px 0 0;
    font-size: 0.85rem;
}

.csk-cart-message[data-type="error"] {
    color: #ffb4ad;
}

@media (max-width: 600px) {
    .csk-cart-item {
        grid-template-columns: 92px minmax(0, 1fr);
        gap: 16px;
    }

    .csk-cart-item > img {
        width: 92px;
        height: 110px;
    }

    .csk-cart-line-price {
        grid-column: 2;
    }
}
/* Checkout order review */
#checkout-items {
    margin: 0 0 24px;
}

.csk-checkout-item {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    padding: 14px 0;
    border-bottom: 1px solid #333;
}

.csk-checkout-item img {
    width: 72px;
    height: 82px;
    object-fit: contain;
    background: #111;
}

.csk-checkout-item strong {
    font-size: 0.85rem;
    font-weight: 400;
}

.csk-checkout-item p {
    margin: 5px 0 0;
    color: #aaa;
    font-size: 0.75rem;
}

.csk-checkout-item > span {
    font-size: 0.82rem;
}

.csk-checkout-message {
    margin: 20px 0 0;
    font-size: 0.85rem;
    line-height: 1.7;
}

.csk-checkout-message[data-type="error"] {
    color: #ffb4ad;
}

#checkout-form button[type="submit"]:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

@media (max-width: 600px) {
    .csk-checkout-item {
        grid-template-columns: 56px minmax(0, 1fr);
        gap: 12px;
    }

    .csk-checkout-item img {
        width: 56px;
        height: 65px;
    }

    .csk-checkout-item > span {
        grid-column: 2;
    }
}
/* Search suggestions */
#csk-search-results {
    max-height: min(50vh, 420px);
    overflow-y: auto;
}

.csk-search-result {
    display: block;
    padding: 14px 0;
    border-bottom: 1px solid #e4e4e4;
    color: #111;
    font-size: 0.9rem;
}

.csk-search-result:hover,
.csk-search-result[aria-selected="true"] {
    padding-left: 8px;
    background: #f5f5f5;
}

.csk-search-empty {
    margin: 0;
    color: #555;
    font-size: 0.9rem;
}
.csk-unconnected-form-message {
    margin: 14px 0 0;
    color: #aaa;
    font-size: 0.8rem;
    line-height: 1.6;
}
/* Product gallery controls */
.csk-gallery-controls {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
}

.csk-gallery-arrow {
    position: absolute;
    top: 50%;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.42);
    color: #fff;
    font-size: 28px;
    line-height: 1;
    pointer-events: auto;
}

.csk-gallery-previous {
    left: 20px;
}

.csk-gallery-next {
    right: 20px;
}

.csk-gallery-dots {
    position: absolute;
    right: 0;
    bottom: 18px;
    left: 0;
    display: flex;
    justify-content: center;
    gap: 10px;
    pointer-events: auto;
}

.csk-gallery-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 1px solid #fff;
    border-radius: 50%;
    background: transparent;
}

.csk-gallery-dot[aria-current="true"] {
    background: #fff;
}

.csk-gallery-arrow:focus-visible,
.csk-gallery-dot:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 4px;
}

.csk-gallery-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;
}

@media (max-width: 700px) {
    .csk-gallery-arrow {
        width: 36px;
        height: 36px;
        font-size: 24px;
    }

    .csk-gallery-previous {
        left: 12px;
    }

    .csk-gallery-next {
        right: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .csk-gallery-arrow,
    .csk-gallery-dot {
        transition: none !important;
    }
}

/* Keep product art at its natural proportions. The white-background cover
   image is square artwork, so square corners make it feel intentional on the
   black gallery instead of looking like a rounded UI card. */
body:has(#quantity) main > section:first-child img {
    width: auto !important;
    height: auto !important;
    max-width: min(520px, 100%) !important;
    max-height: 540px !important;
    aspect-ratio: auto !important;
}

body:has(#quantity) main > section:first-child > div:first-child img {
    border-radius: 0 !important;
}

body:has(#quantity) main > section:first-child > div:not(:first-child) img {
    border-radius: 18px !important;
}
 /* Temporary monochrome polish preview */

/* Account sign-in/create-account choices */
body:has(#sign-in) main > section:nth-child(2) > div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 190px;
    padding: 26px;
    background: #0b0b0b;
    border: 1px solid #292929;
}

body:has(#sign-in) main > section:nth-child(2) a {
    display: inline-block;
    padding: 12px 18px;
    border: 1px solid #777;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

body:has(#sign-in) main > section:nth-child(2) a:hover,
body:has(#sign-in) main > section:nth-child(2) a:focus-visible {
    background: #fff;
    color: #000;
    border-color: #fff;
}


/* Product Add to Cart button */
body:has(#quantity) main > section:nth-child(2)
> div:has(button:not([aria-label])) button {
    background: #111;
    color: #fff;
    border: 1px solid #111;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

body:has(#quantity) main > section:nth-child(2)
> div:has(button:not([aria-label])) button:hover:not(:disabled) {
    background: #333;
    color: #fff;
    transform: translateY(-1px);
}

body:has(#cart-items) main > section:has(> #empty-cart:not([hidden])) {
    min-height: 34vh;
    padding-top: 28px;
    padding-bottom: 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#empty-cart {
    margin: 0 auto;
    text-align: center;
}

#empty-cart ul {
    justify-content: center;
}

/* Keep cart content in the intended visual order */
body:has(#cart-items) main {
    display: flex;
    flex-direction: column;
}

body:has(#cart-items) main > section:first-child {
    order: 1;
}

body:has(#cart-items) main > section:nth-child(2) {
    order: 2;
}

body:has(#cart-items) main > #cart-summary {
    order: 3;
}

body:has(#cart-items) main > #cart-actions {
    order: 4;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

#cart-actions a {
    display: inline-block;
    padding: 14px 22px;
    background: #fff;
    color: #000;
    border: 1px solid #fff;
    text-align: center;
    text-decoration: none;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#cart-actions a:hover {
    background: #ddd;
    border-color: #ddd;
}

#cart-actions a:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 4px;
}

#cart-actions a[aria-disabled="true"] {
    opacity: 0.4;
    pointer-events: none;
}

.csk-form-trap {
    position: fixed !important;
    top: -10000px !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

.newsletter-consent {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin: 0.75rem 0;
    font-size: 0.8rem;
    line-height: 1.45;
}

.newsletter-consent input {
    flex: 0 0 auto;
    margin-top: 0.15rem;
}

#newsletter-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 52px;
}

footer form label.newsletter-consent {
    position: static;
    grid-column: 1 / -1;
    display: flex;
    align-items: flex-start;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    margin: 0.75rem 0;
    font-size: 0.8rem;
    line-height: 1.45;
    text-transform: none;
}

footer form .newsletter-consent input {
    flex: 0 0 auto;
    width: auto;
    height: auto;
    margin-top: 0.15rem;
    padding: 0;
    border: 0;
}

#newsletter-form > input[type="email"] { grid-column: 1; grid-row: 1; }
#newsletter-form > button { grid-column: 2; grid-row: 1; }

/* Unified CASED BY SK palette: dark graphite and linen white. */
:root {
    --csk-graphite: #2a2a2a;
    --csk-linen: #f8f5ed;
    --csk-linen-line: #dedbd3;
}

html, body, body main, body main > section {
    background-color: var(--csk-graphite) !important;
}
body { color: var(--csk-linen); }

/* The home wordmark sits on the same linen surface as the collection pills. */
body:has(main > section:first-child > img[src*="csk wordmark"]) main > section:first-child {
    background-color: var(--csk-linen) !important;
    color: var(--csk-graphite) !important;
}
body:has(main > section:first-child > img[src*="csk wordmark"]) main > section:first-child img {
    mix-blend-mode: multiply;
}
body:has(main > section:first-child > img[src*="csk wordmark"]) main > section:nth-child(2) > a {
    background-color: var(--csk-linen) !important;
    color: var(--csk-graphite) !important;
    border-color: var(--csk-linen) !important;
}

/* Most pages use the linen header; home retains its original dark header. */
header {
    background-color: var(--csk-linen) !important;
    color: var(--csk-graphite) !important;
}
header :is(button, a, svg) { color: var(--csk-graphite) !important; }
header img[src*="csk logo"] { mix-blend-mode: multiply; }
body:has(main > section:first-child > img[src*="csk wordmark"]) header,
body:has(main > section:first-child > img[src*="csk wordmark"]) header > nav {
    background-color: var(--csk-graphite) !important;
    color: var(--csk-linen) !important;
}
body:has(main > section:first-child > img[src*="csk wordmark"]) header > nav :is(button, a, svg) {
    color: var(--csk-linen) !important;
}
body:has(main > section:first-child > img[src*="csk wordmark"]) header > nav > div:not(#hamburger-menu) img {
    filter: brightness(0) invert(1) !important;
}

footer, #hamburger-menu {
    background-color: var(--csk-linen) !important;
    color: var(--csk-graphite) !important;
}
footer :is(button, a, h3, p, li, label, input, svg),
#hamburger-menu :is(a, svg) { color: var(--csk-graphite) !important; }

/* Keep the dark pages uniform while giving light controls the same linen tone. */
main :is(input, select, textarea) {
    background-color: var(--csk-graphite) !important;
    border-color: #77736b !important;
    color: var(--csk-linen) !important;
}
footer form :is(input, button) {
    background-color: var(--csk-linen) !important;
    color: var(--csk-graphite) !important;
    border-color: #bcb8ae !important;
}
body:has(#quantity) main,
body:has(#quantity) main > section:first-child {
    background-color: var(--csk-graphite) !important;
}
body:has(#quantity) main > section:nth-child(2) {
    background-color: var(--csk-linen) !important;
    color: var(--csk-graphite) !important;
    border-top: 1px solid var(--csk-linen-line);
}
body:has(#quantity) main > section:nth-child(2) :is(h1, h2, h3, p, label, a, span, strong, button:not([type="submit"])) {
    color: var(--csk-graphite) !important;
}
body:has(#quantity) main > section:nth-child(2) button:not([type="submit"]) {
    background-color: var(--csk-linen) !important;
    border-color: var(--csk-graphite) !important;
}
body:has(#quantity) main > section:nth-child(2) button[type="submit"] {
    background-color: var(--csk-graphite) !important;
    color: var(--csk-linen) !important;
}
#cart-actions a,
body:has(#checkout-form) main > section:last-child a {
    background-color: var(--csk-linen) !important;
    color: var(--csk-graphite) !important;
    border-color: var(--csk-linen) !important;
}
body:has(#checkout-form) #checkout-form .csk-payment button {
    background-color: var(--csk-linen) !important;
    color: var(--csk-graphite) !important;
    border: 1px solid var(--csk-linen) !important;
}
#cart-actions a:hover,
body:has(#checkout-form) main > section:last-child a:hover {
    background-color: #e9e5dc !important;
    border-color: #e9e5dc !important;
}

/* Product pages use a graphite footer to continue the gallery surface. */
body:has(#quantity) footer {
    background-color: var(--csk-graphite) !important;
    color: var(--csk-linen) !important;
}
body:has(#quantity) footer :is(a, h3, p, li, label, svg) {
    color: var(--csk-linen) !important;
}
body:has(#quantity) footer form :is(input, button) {
    background-color: var(--csk-linen) !important;
    border-color: var(--csk-linen) !important;
    color: var(--csk-graphite) !important;
}

/* Phone-model control: graphite field, linen option menu, graphite lettering. */
body:has(#quantity) #phone-model {
    appearance: auto;
    background-color: var(--csk-graphite) !important;
    border: 1px solid #77736b !important;
    color: var(--csk-linen) !important;
    color-scheme: light;
}
body:has(#quantity) #phone-model option {
    background-color: var(--csk-linen);
    color: var(--csk-graphite);
}
body:has(#quantity) #phone-model option:checked {
    background: var(--csk-graphite);
    color: var(--csk-linen);
}
body:has(#quantity) main > section:nth-child(2) > div:has(> #phone-model) {
    position: relative;
    width: min(480px, 100%);
}
body:has(#quantity) main > section:nth-child(2) > div:has(> #phone-model) > label {
    position: absolute;
    z-index: 1;
    top: 15px;
    left: 22px;
    margin: 0;
    color: var(--csk-linen) !important;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    text-transform: none;
    pointer-events: none;
}
body:has(#quantity) #phone-model {
    display: block;
    width: 100%;
    max-width: 520px;
    min-height: 84px;
    height: 84px;
    padding: 31px 52px 12px 22px;
    border: 1px solid #77736b !important;
    border-radius: 22px;
    color: var(--csk-linen) !important;
    background-color: var(--csk-graphite) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='12' viewBox='0 0 20 12'%3E%3Cpath d='m2 2 8 8 8-8' fill='none' stroke='%23f8f5ed' stroke-width='2.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 22px center;
    appearance: none;
    color-scheme: light;
    font-size: 1.15rem;
    cursor: pointer;
}
body:has(#quantity) #phone-model:focus-visible {
    outline: 2px solid var(--csk-linen);
    outline-offset: 3px;
}
body:has(#quantity) #phone-model option {
    padding: 12px 16px;
    background-color: var(--csk-linen);
    color: var(--csk-graphite);
    font-size: 1rem;
}
body:has(#quantity) #phone-model option:checked {
    background-color: var(--csk-graphite);
    color: var(--csk-linen);
}
body:has(#quantity) #phone-model.csk-model-native {
    display: none !important;
}
body:has(#quantity) .csk-model-trigger {
    position: relative;
    display: grid !important;
    align-content: center !important;
    justify-items: center !important;
    width: 100% !important;
    min-height: 76px !important;
    height: 76px !important;
    padding: 20px 58px 8px 22px !important;
    border: 1px solid #77736b !important;
    border-radius: 22px !important;
    background: var(--csk-graphite) !important;
    color: var(--csk-linen) !important;
    text-align: left !important;
    font: inherit !important;
    font-size: 1.15rem !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    cursor: pointer !important;
}
body:has(#quantity) .csk-model-value {
    width: 100%;
    text-align: center;
    line-height: 1.2;
}
body:has(#quantity) .csk-model-trigger::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 24px;
    width: 11px;
    height: 11px;
    border-right: 2px solid var(--csk-linen);
    border-bottom: 2px solid var(--csk-linen);
    transform: translateY(-70%) rotate(45deg);
    transition: transform 160ms ease;
}
body:has(#quantity) .csk-model-trigger[aria-expanded="true"]::after {
    transform: translateY(-25%) rotate(225deg);
}
body:has(#quantity) .csk-model-trigger:focus-visible,
body:has(#quantity) .csk-model-option:focus-visible {
    outline: 2px solid var(--csk-graphite);
    outline-offset: 3px;
}
body:has(#quantity) .csk-model-options {
    position: absolute;
    z-index: 20;
    top: calc(100% + 10px);
    left: 0;
    width: 100%;
    max-height: min(340px, 55vh);
    overflow-y: auto;
    padding: 8px;
    border: 1px solid var(--csk-linen-line);
    border-radius: 20px;
    background: var(--csk-linen);
    box-shadow: 0 16px 36px rgb(0 0 0 / 20%);
    scrollbar-color: #aaa69c var(--csk-linen);
    scrollbar-width: thin;
}
body:has(#quantity) .csk-model-options[hidden] { display: none !important; }
body:has(#quantity) .csk-model-option {
    display: block !important;
    width: 100% !important;
    min-height: 54px !important;
    height: auto !important;
    padding: 12px 18px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: transparent !important;
    color: var(--csk-graphite) !important;
    text-align: left !important;
    font: inherit !important;
    font-size: 1rem !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    cursor: pointer !important;
}
body:has(#quantity) .csk-model-option:hover,
body:has(#quantity) .csk-model-option:focus-visible {
    background: #ebe7df !important;
}
body:has(#quantity) .csk-model-option[aria-selected="true"] {
    background: var(--csk-graphite) !important;
    color: var(--csk-linen) !important;
}
body:has(#quantity) .csk-model-option:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
@media (max-width: 640px) {
    body:has(#quantity) main > section:nth-child(2) > div:has(> #phone-model) { width: 100%; }
    body:has(#quantity) .csk-model-trigger { min-height: 70px !important; height: 70px !important; border-radius: 18px !important; }
    body:has(#quantity) .csk-model-options { max-height: 48vh; border-radius: 16px; }
}

/* Keep the homepage social icons on the same linen as the footer. */
body:has(main > section:first-child > img[src*="csk wordmark"])
footer > section:nth-child(5) nav[aria-label="Social media"] {
    background: var(--csk-linen) !important;
}

/* Minimal CSK footer: centered on every viewport, with newsletter handled separately. */
html body footer.csk-site-footer {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 34px clamp(18px, 5vw, 64px) 26px !important;
  border: 0 !important;
  background: var(--csk-linen, #f8f5ed) !important;
  color: var(--csk-graphite, #2a2a2a) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.csk-site-footer nav.footer-social {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 28px;
  width: 100%;
  margin: 0 auto 27px;
}

.csk-site-footer nav.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  min-height: 28px;
  color: inherit !important;
  transition: opacity .18s ease, transform .18s ease;
}

.csk-site-footer nav.footer-social a:hover { opacity: .65; transform: translateY(-1px); }
.csk-site-footer nav.footer-social svg { display: block; width: 24px; height: 24px; color: currentColor !important; }

.csk-site-footer .footer-divider {
  display: block;
  width: 100%;
  height: 1px;
  margin: 0;
  border: 0;
  background: var(--csk-linen-line, #dedbd3);
}

.csk-site-footer .footer-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding-top: 20px;
  text-align: center;
}

.csk-site-footer .footer-copyright {
  margin: 0;
  color: inherit;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: .12em;
}

.csk-site-footer nav.footer-legal {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 9px 20px;
  width: 100%;
}

.csk-site-footer nav.footer-legal a {
  color: inherit !important;
  font-size: 12px;
  line-height: 1.5;
  text-decoration: none;
}

.csk-site-footer nav.footer-legal a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* A light, non-blocking sign-up card appears after a visitor has browsed for a while. */
.csk-newsletter-popup[hidden] { display: none !important; }
.csk-newsletter-popup {
  position: fixed;
  z-index: 1200;
  left: 50%;
  bottom: max(22px, env(safe-area-inset-bottom));
  width: min(440px, calc(100vw - 36px));
  padding: 25px 28px 22px;
  transform: translateX(-50%);
  border: 1px solid var(--csk-linen-line, #dedbd3);
  background: var(--csk-linen, #f8f5ed);
  color: var(--csk-graphite, #2a2a2a);
  box-shadow: 0 16px 48px rgb(0 0 0 / 20%);
  text-align: center;
  animation: csk-newsletter-arrive .35s ease-out both;
}

@keyframes csk-newsletter-arrive {
  from { opacity: 0; translate: 0 12px; }
  to { opacity: 1; translate: 0 0; }
}

.csk-newsletter-popup .csk-newsletter-close {
  position: absolute;
  top: 8px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 24px;
  cursor: pointer;
}

.csk-newsletter-popup .csk-newsletter-eyebrow {
  margin: 0 0 8px;
  font-size: 10px;
  letter-spacing: .18em;
}

.csk-newsletter-popup h2 {
  margin: 0 28px 7px;
  color: inherit;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.csk-newsletter-popup .csk-newsletter-copy {
  margin: 0;
  color: inherit;
  font-size: 13px;
  line-height: 1.5;
}

.csk-newsletter-popup #newsletter-form { display: block !important; width: 100% !important; margin: 15px 0 0 !important; }
.csk-newsletter-popup .csk-newsletter-email-row { display: grid; grid-template-columns: minmax(0, 1fr) 46px; width: 100%; }
.csk-newsletter-popup input[type="email"] {
  width: 100% !important;
  min-width: 0 !important;
  height: 44px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  border: 1px solid var(--csk-linen-line, #dedbd3) !important;
  border-right: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: inherit !important;
  font: inherit;
  font-size: 13px;
}

.csk-newsletter-popup .csk-newsletter-email-row button[type="submit"] {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 46px !important;
  height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--csk-linen-line, #dedbd3) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: inherit !important;
  font-size: 20px;
  cursor: pointer;
}

.csk-newsletter-popup .csk-newsletter-consent {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  margin: 10px auto 0;
  color: #66645e;
  font-size: 10px;
  line-height: 1.45;
  text-align: left;
}

.csk-newsletter-popup .csk-newsletter-consent input { flex: 0 0 14px; width: 14px; height: 14px; margin: 1px 0 0; accent-color: var(--csk-graphite, #2a2a2a); }
.csk-newsletter-popup .csk-newsletter-trap { position: fixed !important; left: -10000px !important; top: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; }
.csk-newsletter-popup .csk-unconnected-form-message { margin: 10px 0 0; color: inherit; font-size: 12px; line-height: 1.45; }
.csk-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }

@media (max-width: 640px) {
  html body footer.csk-site-footer { padding: 28px 18px 22px !important; }
  .csk-site-footer nav.footer-social { gap: 26px; margin-bottom: 22px; }
  .csk-site-footer .footer-meta { gap: 12px; padding-top: 17px; }
  .csk-site-footer nav.footer-legal { gap: 9px 15px; }
  .csk-newsletter-popup { bottom: max(12px, env(safe-area-inset-bottom)); width: calc(100vw - 24px); padding: 23px 20px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .csk-newsletter-popup { animation: none; }
}

/* Cart page: match the calm CSK account surfaces at desktop and mobile widths. */
body:has(#cart-items) main {
  min-height: 60vh;
  background: #f7f4ec !important;
  color: #292827 !important;
}

body:has(#cart-items) main > section,
body:has(#cart-items) main > #cart-actions {
  width: min(1180px, 100%);
  margin-inline: auto;
  padding-inline: clamp(18px, 5vw, 72px);
}

body:has(#cart-items) main > section:first-child {
  padding-top: clamp(44px, 7vw, 82px);
  padding-bottom: 26px;
}

body:has(#cart-items) main > section:first-child h1 {
  margin-bottom: 10px;
  color: #292827;
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  letter-spacing: -.05em;
}

body:has(#cart-items) main > section:first-child p { color: #706c65; }
body:has(#cart-items) main > section:nth-child(2) { padding-top: 16px; padding-bottom: 20px; }

#cart-items { width: 100%; }

.csk-cart-item {
  align-items: center;
  gap: clamp(14px, 3vw, 28px);
  padding: 22px 0;
  border-top-color: #e4dfd5;
}

.csk-cart-item > img {
  width: clamp(88px, 13vw, 140px);
  height: clamp(100px, 14vw, 156px);
  border-radius: 10px;
  background: #efede7;
}

.csk-cart-item-details h3 { color: #292827; font-weight: 600; }
.csk-cart-item-details p { color: #55514c; }
.csk-cart-item-details .csk-cart-unit-price { color: #777168; }
.csk-cart-line-price { color: #292827; }
.csk-cart-controls button,
.csk-cart-remove { border-color: #d7d0c5; color: #292827; }
.csk-cart-controls button { min-width: 34px; min-height: 34px; border-radius: 999px; }
.csk-cart-remove { padding-bottom: 3px; }

#empty-cart {
  padding: clamp(22px, 4vw, 38px);
  border: 1px solid #e4dfd5;
  border-radius: 18px;
  background: #fffdf8;
}

#empty-cart h2 { color: #292827; font-weight: 600; }
#empty-cart > p { color: #706c65; }
#empty-cart ul { gap: 10px; }
#empty-cart a { color: #6f2638; }

body:has(#cart-items) main > #cart-summary {
  width: min(1180px, 100%);
  margin: 10px auto 0;
  padding: 24px clamp(18px, 5vw, 72px) 10px;
}

#cart-summary h2 { color: #777168; font-size: .72rem; font-weight: 650; }
#cart-summary > div { border-color: #e4dfd5; color: #292827; }

body:has(#cart-items) main > #cart-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 22px;
  padding-bottom: clamp(52px, 8vw, 88px);
}

#cart-actions a {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  border: 1px solid #292827;
  border-radius: 999px;
  background: #292827;
  color: #fffdf8;
}

#cart-actions a + a { background: transparent; color: #292827; }
#cart-actions a:hover,
#cart-actions a:focus-visible { border-color: #6f2638; background: #6f2638; color: #fff; }

@media (max-width: 600px) {
  body:has(#cart-items) main > section:first-child { padding-bottom: 20px; }
  .csk-cart-item { grid-template-columns: 82px minmax(0, 1fr); align-items: start; gap: 14px; }
  .csk-cart-item > img { width: 82px; height: 100px; }
  .csk-cart-item-details { min-width: 0; }
  .csk-cart-line-price { grid-column: 2; margin-top: -6px; }
  body:has(#cart-items) main > #cart-summary { padding-top: 18px; }
  body:has(#cart-items) main > #cart-actions { display: grid; grid-template-columns: 1fr; }
  #cart-actions a { width: 100%; }
}

/* Cart polish: a continuous linen page with distinct product and summary cards. */
body:has(#cart-items) main,
body:has(#cart-items) main > section,
body:has(#cart-items) main > #cart-actions {
  background: #f7f4ec !important;
  color: #292827 !important;
}

body:has(#cart-items) main > section:first-child h1 { color: #292827; }
body:has(#cart-items) main > section:first-child p { color: #55514c; }

.csk-cart-item {
  margin: 10px 0;
  padding: 18px;
  border: 1px solid #e4dfd5;
  border-radius: 14px;
  background: #fffdf8;
}

body:has(#cart-items) main > #cart-summary {
  width: min(1180px, 100%);
  margin: 8px auto 0;
  padding: 24px clamp(18px, 5vw, 72px);
  border: 1px solid #e4dfd5;
  border-radius: 16px;
  background: #fffdf8 !important;
}

body:has(#cart-items) main > #cart-summary h2,
body:has(#cart-items) main > #cart-summary > div { color: #292827; }

@media (max-width: 600px) {
  .csk-cart-item { padding: 14px; }
  body:has(#cart-items) main > #cart-summary { padding: 20px 18px; }
}

/* Cart page: graphite content area with a compact subtotal card. */
body:has(#cart-items) main,
body:has(#cart-items) main > section,
body:has(#cart-items) main > #cart-actions {
  background: #292827 !important;
  color: #f7f4ec !important;
}

body:has(#cart-items) main > section:first-child h1,
body:has(#cart-items) main > section:first-child p {
  color: #f7f4ec;
}

.csk-cart-item {
  border-color: rgb(247 244 236 / 14%);
  background: #343331;
  box-shadow: 0 8px 24px rgb(0 0 0 / 18%);
}

.csk-cart-item-details h3,
.csk-cart-item-details p,
.csk-cart-item-details .csk-cart-unit-price,
.csk-cart-line-price,
.csk-cart-controls button,
.csk-cart-remove {
  color: #f7f4ec;
}

#empty-cart {
  border-color: rgb(247 244 236 / 14%);
  background: #343331;
  box-shadow: 0 8px 24px rgb(0 0 0 / 18%);
}

#empty-cart h2,
#empty-cart > p { color: #f7f4ec; }

body:has(#cart-items) main > #cart-summary {
  align-self: flex-start;
  width: min(480px, 100%);
  box-sizing: border-box;
  margin: 8px 0 0 clamp(18px, 5vw, 72px);
  padding: 22px 24px;
  border: 1px solid rgb(247 244 236 / 14%);
  border-radius: 16px;
  background: #343331 !important;
  box-shadow: 0 8px 24px rgb(0 0 0 / 18%);
  color: #f7f4ec !important;
}

body:has(#cart-items) main > #cart-summary h2,
body:has(#cart-items) main > #cart-summary > div { color: #f7f4ec; }

body:has(#cart-items) main > #cart-summary > div { border-color: rgb(247 244 236 / 18%); }

@media (max-width: 600px) {
  body:has(#cart-items) main > #cart-summary {
    width: calc(100% - 36px);
    margin-left: 18px;
  }
}

/* Cart thumbnails: square, slightly larger frames for the square product artwork. */
.csk-cart-item {
  grid-template-columns: clamp(120px, 16vw, 168px) minmax(0, 1fr) auto;
}

.csk-cart-item > img {
  width: clamp(120px, 16vw, 168px);
  height: clamp(120px, 16vw, 168px);
  aspect-ratio: 1;
  object-fit: contain;
}

@media (max-width: 600px) {
  .csk-cart-item { grid-template-columns: 100px minmax(0, 1fr); }
  .csk-cart-item > img { width: 100px; height: 100px; }
}

/* Checkout refinements: match cart thumbnails and keep the two actions together. */
body:has(#checkout-form) #checkout-form fieldset:nth-of-type(1) input:not([type="checkbox"]),
body:has(#checkout-form) #checkout-form fieldset:nth-of-type(2) input:not([type="checkbox"]),
body:has(#checkout-form) #checkout-form fieldset:nth-of-type(1) textarea,
body:has(#checkout-form) #checkout-form fieldset:nth-of-type(2) textarea {
  background: #30302e;
  border-color: rgb(247 244 236 / 24%);
  border-radius: 7px;
}

body:has(#checkout-form) #checkout-form fieldset:nth-of-type(1) input:focus,
body:has(#checkout-form) #checkout-form fieldset:nth-of-type(2) input:focus,
body:has(#checkout-form) #checkout-form fieldset:nth-of-type(1) textarea:focus,
body:has(#checkout-form) #checkout-form fieldset:nth-of-type(2) textarea:focus {
  background: #343331;
  border-color: var(--csk-linen, #f7f4ec);
}

body:has(#checkout-form) #checkout-form fieldset:nth-of-type(3) > .csk-checkout-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-top: 10px;
  padding: 18px 0;
  border-top: 1px solid rgb(247 244 236 / 24%);
  font-weight: 600;
}

body:has(#checkout-form) .csk-checkout-item {
  grid-template-columns: clamp(100px, 13vw, 148px) minmax(0, 1fr) auto;
  gap: 18px;
}

body:has(#checkout-form) .csk-checkout-item img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  background: var(--csk-linen, #f7f4ec);
  border-radius: 10px;
}

body:has(#checkout-form) #checkout-form .csk-checkout-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
}

body:has(#checkout-form) #checkout-form .csk-checkout-actions > :is(button, a) {
  display: inline-flex;
  flex: 0 1 auto;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 24px;
  border: 1px solid var(--csk-linen, #f7f4ec) !important;
  border-radius: 999px;
  background: var(--csk-linen, #f7f4ec) !important;
  color: var(--csk-graphite, #292827) !important;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
}

body:has(#checkout-form) #checkout-form .csk-checkout-actions > :is(button, a):hover,
body:has(#checkout-form) #checkout-form .csk-checkout-actions > :is(button, a):focus-visible {
  border-color: #e9e5dc !important;
  background: #e9e5dc !important;
  color: var(--csk-graphite, #292827) !important;
}

body:has(#checkout-form) #checkout-form .csk-checkout-actions > button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (max-width: 600px) {
  body:has(#checkout-form) .csk-checkout-item {
    grid-template-columns: 100px minmax(0, 1fr);
    gap: 12px;
  }

  body:has(#checkout-form) .csk-checkout-item img {
    width: 100px;
    height: 100px;
  }

  body:has(#checkout-form) #checkout-form .csk-checkout-actions > :is(button, a) {
    flex: 1 1 calc(50% - 6px);
    min-width: 0;
    padding-right: 12px;
    padding-left: 12px;
    font-size: 0.58rem;
    letter-spacing: 0.08em;
    white-space: nowrap;
  }
}

@media (max-width: 390px) {
  body:has(#checkout-form) #checkout-form .csk-checkout-actions {
    gap: 8px;
  }
}

/* Keep agreement links inline and give discount controls the checkout button finish. */
body:has(#checkout-form) #checkout-form .csk-checkout-agreement a {
  display: inline;
  min-height: 0;
  padding: 0;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  color: var(--csk-linen, #f7f4ec) !important;
  font: inherit;
  letter-spacing: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-transform: none;
}

body:has(#checkout-form) #checkout-form .csk-checkout-agreement {
  margin: 26px 0 0;
  padding: 0;
  border: 0;
}

body:has(#checkout-form) #checkout-form > fieldset:nth-of-type(3) {
  border-bottom-color: rgb(247 244 236 / 24%);
}

body:has(#checkout-form) #checkout-form .csk-discount-controls #discount-code {
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid rgb(247 244 236 / 42%) !important;
  border-radius: 999px;
  background: #30302e !important;
  color: var(--csk-linen, #f7f4ec) !important;
}

body:has(#checkout-form) #checkout-form .csk-discount-controls #discount-apply {
  min-height: 48px;
  padding: 0 24px;
  border: 1px solid var(--csk-linen, #f7f4ec) !important;
  border-radius: 999px;
  background: var(--csk-linen, #f7f4ec) !important;
  color: var(--csk-graphite, #292827) !important;
}

/* Make inline links in legal-page copy easy to recognize. */
main a[href="contact.html"] {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Keep empty-cart collection links readable against the graphite panel. */
#empty-cart a {
  color: var(--csk-linen, #f7f4ec);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

#empty-cart a:hover,
#empty-cart a:focus-visible {
  color: #fffdf8;
  text-decoration-thickness: 2px;
}

/* Keep the shared search panel identical on pages with their own form styles. */
body #csk-search-panel .csk-search-box {
  background: #fff;
  color: #292827;
}

body #csk-search-panel .csk-search-box label {
  color: #292827;
}

body #csk-search-panel #csk-search-input {
  width: 100%;
  border: 0;
  border-bottom: 1px solid #111;
  border-radius: 0;
  background: transparent;
  color: #292827;
  box-shadow: none;
}

body #csk-search-panel #csk-search-input:focus {
  outline: none;
  border-bottom-color: #292827;
}

body #csk-search-panel .csk-search-close {
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #292827;
}

@media (max-width: 800px) {
  /* Make the centered brand mark easier to pick out on every mobile header. */
  header > nav > div:not(#hamburger-menu) img {
    width: 70px !important;
    height: 60px !important;
  }

  body:has(main > section:first-child > img[src*="csk wordmark"])
  header > nav > div:not(#hamburger-menu) img {
    width: 70px !important;
    height: 60px !important;
  }
}

@media (max-width: 600px) {
  /* Give the empty state a deliberate gap after the cart intro. */
  body:has(#cart-items) main > section:has(> #empty-cart:not([hidden])) {
    min-height: 0;
    padding-top: 42px;
    padding-bottom: 36px;
    justify-content: flex-start;
  }

  #empty-cart {
    box-sizing: border-box;
    padding: 28px 20px;
  }

  #empty-cart h2 {
    font-size: 1.1rem;
  }

  #empty-cart > p {
    font-size: 1rem;
  }

  #empty-cart ul {
    gap: 12px 16px;
  }

  #empty-cart a {
    font-size: .72rem;
  }
}

/* Keep all FAQ topic headings as prominent as the Products heading. */
.faq-category {
  margin-bottom: 24px;
  font-size: 1.4rem !important;
  line-height: 1.2;
  font-weight: 500 !important;
}

/* Keep shipping-policy topics prominent and their details clearly nested. */
.shipping-returns-page > section:not(:first-child) > h2 {
  margin-bottom: 24px !important;
  font-size: 1.4rem !important;
  line-height: 1.2 !important;
  font-weight: 500 !important;
}

.shipping-returns-page > section > h3 {
  margin: 26px 0 8px !important;
  font-size: 1rem !important;
  line-height: 1.35 !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em;
}

.shipping-returns-page > section:nth-child(2) > h3:first-of-type {
  margin-top: 36px !important;
}

.privacy-policy-page > section:not(:first-child) > h2,
.terms-of-service-page > section:not(:first-child) > h2 {
  font-size: 1.4rem !important;
  line-height: 1.2 !important;
  font-weight: 500 !important;
}

/* Keep the create-account form copy legible on the graphite account page. */
#create-account > h2,
#create-account-form label {
  color: var(--csk-linen, #f7f4ec) !important;
}

#create-account-form > div:not(:has(input[type="checkbox"])) > label {
  display: block;
  margin-bottom: 10px;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#create-account-form input:not([type="checkbox"]) {
  background-color: var(--csk-graphite, #292827) !important;
  color: var(--csk-linen, #f7f4ec) !important;
  border-color: rgb(247 244 236 / 58%) !important;
}

#create-account-form > div:has(input[type="checkbox"]) > label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.6;
  text-transform: none;
}

#create-account-form input[type="checkbox"] {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin: 3px 0 0;
  accent-color: var(--csk-linen, #f7f4ec);
}

#create-account-form a {
  color: var(--csk-linen, #f7f4ec) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

#create-account-form input:not([type="checkbox"]) {
  border-radius: 7px !important;
}

#create-account-form button[type="submit"] {
  min-height: 48px;
  padding: 0 24px;
  border-radius: 999px !important;
}

#sign-in > h2,
#sign-in-form label,
#sign-in-form > a {
  color: var(--csk-linen, #f7f4ec) !important;
}

#sign-in-form > div > label {
  display: block;
  margin-bottom: 10px;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#sign-in-form input:not([type="checkbox"]) {
  background-color: var(--csk-graphite, #292827) !important;
  color: var(--csk-linen, #f7f4ec) !important;
  border-color: rgb(247 244 236 / 58%) !important;
  border-radius: 7px !important;
}

#sign-in-form button[type="submit"] {
  min-height: 48px;
  padding: 0 24px;
  border-radius: 999px !important;
}

#forgot-password > h2,
#forgot-password > p,
#forgot-password-form label,
#forgot-password-form > a,
#forgot-password .csk-form-message {
  color: var(--csk-linen, #f7f4ec) !important;
}

#forgot-password-form > label {
  display: block;
  margin-bottom: 10px;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#forgot-password-form input {
  background-color: var(--csk-graphite, #292827) !important;
  color: var(--csk-linen, #f7f4ec) !important;
  border-color: rgb(247 244 236 / 58%) !important;
  border-radius: 7px !important;
}

#forgot-password-form button[type="submit"] {
  min-height: 48px;
  padding: 0 24px;
  margin-top: 18px;
  border-radius: 999px !important;
}

#sign-in-form button[type="submit"] {
  margin-right: 8px;
}

/* Accessible eye controls shared by account and admin password fields. */
.password-input-wrap {
  position: relative;
  display: block;
  width: 100%;
}

.password-input-wrap > input {
  box-sizing: border-box;
  width: 100% !important;
  padding-inline-end: 3.25rem !important;
}

button.password-visibility-toggle {
  position: absolute;
  z-index: 1;
  inset-inline-end: 8px;
  top: 50%;
  display: inline-flex;
  width: 40px;
  height: 40px;
  min-height: 0 !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  transform: translateY(-50%);
  border: 1px solid transparent !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: var(--csk-linen, #f7f4ec) !important;
  opacity: 1 !important;
  cursor: pointer;
  isolation: isolate;
}

button.password-visibility-toggle::before {
  position: absolute;
  z-index: -1;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--csk-linen, #f7f4ec);
  content: "";
  opacity: 0;
  transform: scale(.86);
  transition: opacity 160ms ease, transform 160ms ease;
}

button.password-visibility-toggle:hover,
button.password-visibility-toggle:focus-visible {
  border-color: transparent !important;
  background: transparent !important;
  color: var(--csk-graphite, #292827) !important;
}

button.password-visibility-toggle:hover::before,
button.password-visibility-toggle:focus-visible::before {
  opacity: 1;
  transform: scale(1);
}

button.password-visibility-toggle:focus-visible {
  outline: 2px solid var(--csk-linen, #f7f4ec);
  outline-offset: 2px;
}

.password-visibility-toggle svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

/* One linen-and-graphite primary-action style across storefront pages. */
main button:not([aria-label]):not([aria-pressed]):not(.password-visibility-toggle),
footer form button[type="submit"],
body:has(#sign-in) main > section:nth-child(2) a {
  display: inline-flex !important;
  min-height: 48px !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 24px !important;
  border: 1px solid var(--csk-linen, #f7f4ec) !important;
  border-radius: 999px !important;
  background: var(--csk-linen, #f7f4ec) !important;
  color: var(--csk-graphite, #292827) !important;
  font-family: inherit !important;
  font-size: 0.68rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.12em !important;
  line-height: 1.2 !important;
  text-align: center !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease !important;
}

main button:not([aria-label]):not([aria-pressed]):not(.password-visibility-toggle):hover,
main button:not([aria-label]):not([aria-pressed]):not(.password-visibility-toggle):focus-visible,
footer form button[type="submit"]:hover,
footer form button[type="submit"]:focus-visible,
body:has(#sign-in) main > section:nth-child(2) a:hover,
body:has(#sign-in) main > section:nth-child(2) a:focus-visible {
  border-color: #fffdf8 !important;
  background: #fffdf8 !important;
  color: var(--csk-graphite, #292827) !important;
}

main button:not([aria-label]):not([aria-pressed]):not(.password-visibility-toggle):disabled,
footer form button[type="submit"]:disabled {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
}

/* Keep the home menu and newsletter surfaces on the same linen tone. */
body:has(main > section:first-child > img[src*="csk wordmark"])
header > nav > button[aria-controls="hamburger-menu"] {
  color: var(--csk-linen, #f8f5ed) !important;
}

#hamburger-menu {
  background-color: var(--csk-linen, #f8f5ed) !important;
}

.csk-newsletter-popup {
  border-color: var(--csk-linen-line, #dedbd3) !important;
  background-color: var(--csk-linen, #f8f5ed) !important;
  color: var(--csk-graphite, #2a2a2a) !important;
}

/* Keep collection cards fully in frame on narrow screens. */
@media (max-width: 800px) {
  main:has(> section:nth-child(2) > div > article),
  main:has(> section:nth-child(3) > div > article) {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }

  main:has(> section:nth-child(2) > div > article) > section:nth-child(3) > div,
  main:has(> section:nth-child(3) > div > article) > section:nth-child(3) > div {
    box-sizing: border-box !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 38px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 20px 56px !important;
  }

  main:has(> section:nth-child(2) > div > article) > section:nth-child(3) > div > article,
  main:has(> section:nth-child(3) > div > article) > section:nth-child(3) > div > article {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 480px;
    min-width: 0;
    justify-self: center;
  }

  main:has(> section:nth-child(2) > div > article) > section:nth-child(3) > div > article > img,
  main:has(> section:nth-child(3) > div > article) > section:nth-child(3) > div > article > img {
    box-sizing: border-box;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    margin-bottom: 10px;
  }
}

/* Give the mobile homepage more room before the footer begins. */
@media (max-width: 640px) {
  html body footer.csk-site-footer {
    padding: 18px 18px 12px !important;
  }

  .csk-site-footer nav.footer-social {
    margin-bottom: 14px;
  }

  .csk-site-footer .footer-meta {
    gap: 8px;
    padding-top: 12px;
  }

  .csk-site-footer nav.footer-legal {
    gap: 7px 12px;
  }
}

/* Keep Glyph product cards aligned despite different source image proportions. */
@media (max-width: 800px) {
  body.glyph-collection-page main > section:nth-child(3) > div > article {
    width: 100% !important;
    max-width: 480px;
  }

  body.glyph-collection-page main > section:nth-child(3) > div > article > img {
    display: block;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    margin-bottom: 10px;
  }

  body.glyph-collection-page main > section:nth-child(3) > div > article > h3 {
    margin: 0 0 5px;
  }

  body.glyph-collection-page main > section:nth-child(3) > div > article > a {
    margin-top: 0;
  }
}

/* Improve small-screen checkout controls and keep the agreement on a clean baseline. */
#checkout-form .csk-checkout-agreement > div {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  margin: 0;
}

#checkout-form .csk-checkout-agreement label {
  display: block;
  min-width: 0;
  margin: 0;
  line-height: 1.6;
}

#checkout-form #terms-agreement {
  margin: 4px 0 0 !important;
}

@media (max-width: 600px) {
  body:has(#checkout-form) #discount-entry {
    display: block !important;
    width: 100%;
    max-width: none;
    margin: 18px 0 10px;
  }

  body:has(#checkout-form) #discount-entry > label {
    margin: 0 0 8px;
  }

  body:has(#checkout-form) #discount-entry .csk-discount-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    gap: 10px;
    width: 100%;
  }

  body:has(#checkout-form) #discount-entry #discount-code {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    padding-inline: 14px;
    font-size: 16px;
  }

  body:has(#checkout-form) #discount-entry #discount-code::placeholder {
    color: #b8b3a9;
    opacity: 1;
  }

  body:has(#checkout-form) #discount-entry #discount-apply {
    min-width: 88px;
    padding-inline: 16px;
    font-size: .62rem;
    letter-spacing: .08em;
  }

  body:has(#checkout-form) #checkout-form .csk-checkout-agreement > div {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    margin: 0;
  }

  body:has(#checkout-form) #checkout-form .csk-checkout-agreement label {
    display: block;
    min-width: 0;
    margin: 0;
    font-size: .76rem;
    line-height: 1.6;
    letter-spacing: 0;
  }

  body:has(#checkout-form) #terms-agreement {
    width: 16px !important;
    height: 16px !important;
    margin: 4px 0 0 !important;
  }
}

.csk-payment-confirmation {
  position: fixed;
  z-index: 20000;
  top: max(18px, env(safe-area-inset-top));
  left: 50%;
  display: flex;
  width: min(520px, calc(100vw - 32px));
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  box-sizing: border-box;
  padding: 15px 18px;
  transform: translateX(-50%);
  border: 1px solid rgb(247 244 236 / 24%);
  border-radius: 12px;
  background: #292827;
  color: #f7f4ec;
  box-shadow: 0 12px 30px rgb(0 0 0 / 24%);
}

.csk-payment-confirmation p {
  margin: 0;
  font-size: .9rem;
  line-height: 1.45;
}

.csk-payment-confirmation button {
  flex: 0 0 auto;
  padding: 2px 6px;
  border: 0;
  background: transparent;
  color: #f7f4ec;
  font-size: 1.3rem;
  cursor: pointer;
}

/* Product details: give mobile shoppers one clear, compact buying sequence. */
@media (max-width: 640px) {
  body:has(#quantity) main > section:nth-child(2) {
    display: flex;
    flex-direction: column;
    padding: 30px 22px 52px !important;
  }

  body:has(#quantity) main > section:nth-child(2) > h1 {
    margin: 0 0 6px !important;
    font-size: clamp(1.9rem, 8vw, 2.25rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -.035em;
  }

  body:has(#quantity) main > section:nth-child(2) > p {
    margin: 0 0 24px !important;
    color: #625e57 !important;
    font-size: 1rem !important;
  }

  body:has(#quantity) main > section:nth-child(2) > div {
    width: 100%;
    max-width: none;
    margin: 0 !important;
    padding: 0 !important;
  }

  body:has(#quantity) main > section:nth-child(2) > div:has(> #phone-model) {
    margin-bottom: 20px !important;
  }

  body:has(#quantity) main > section:nth-child(2) > div:has(> #phone-model) > label {
    position: static !important;
    display: block !important;
    margin: 0 0 8px !important;
    color: #625e57 !important;
    font-size: .67rem !important;
    font-weight: 650 !important;
    letter-spacing: .11em !important;
    text-transform: uppercase !important;
  }

  body:has(#quantity) .csk-model-trigger {
    display: flex !important;
    align-items: center !important;
    justify-items: initial !important;
    min-height: 58px !important;
    height: 58px !important;
    padding: 0 48px 0 16px !important;
    border: 1px solid #c9c4ba !important;
    border-radius: 12px !important;
    background: #fffdf8 !important;
    color: #292827 !important;
    font-size: .98rem !important;
    text-align: left !important;
  }

  body:has(#quantity) .csk-model-value {
    text-align: left;
  }

  body:has(#quantity) .csk-model-trigger::after {
    right: 18px;
    width: 9px;
    height: 9px;
    border-color: #292827;
  }

  body:has(#quantity) main > section:nth-child(2) > div:has(#quantity) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px !important;
  }

  body:has(#quantity) main > section:nth-child(2) > div:has(#quantity) > label {
    margin: 0 !important;
    color: #625e57 !important;
    font-size: .67rem !important;
    font-weight: 650 !important;
    letter-spacing: .11em !important;
  }

  body:has(#quantity) main > section:nth-child(2) > div:has(#quantity) > div {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    height: 42px;
    overflow: hidden;
    border: 1px solid #c9c4ba;
    border-radius: 10px;
    background: #fffdf8;
  }

  body:has(#quantity) main > section:nth-child(2) > div:has(#quantity) > div > button {
    width: 42px !important;
    min-height: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #292827 !important;
    font-size: 1rem !important;
  }

  body:has(#quantity) #quantity {
    width: 42px !important;
    height: 40px !important;
    border: 0 !important;
    border-right: 1px solid #e2ddd4 !important;
    border-left: 1px solid #e2ddd4 !important;
    background: transparent !important;
    color: #292827 !important;
    font-size: .92rem !important;
  }

  body:has(#quantity) main > section:nth-child(2) > div:has(> button:not([aria-label])):not(:has(#phone-model)) {
    margin-bottom: 8px !important;
  }

  body:has(#quantity) main > section:nth-child(2) > div:has(> button:not([aria-label])):not(:has(#phone-model)) > button {
    width: 100% !important;
    min-height: 58px !important;
    border-radius: 12px !important;
    font-size: .72rem !important;
    letter-spacing: .12em !important;
  }

  body:has(#quantity) main > section:nth-child(2) > div:has([data-stock-status]) {
    margin-bottom: 22px !important;
    padding-bottom: 20px !important;
    border-bottom: 1px solid #e2ddd4 !important;
  }

  body:has(#quantity) [data-stock-status] {
    color: #625e57 !important;
    font-size: .82rem !important;
    line-height: 1.45 !important;
  }

body:has(#quantity) main > section:nth-child(2) > div:last-child p {
    width: 100% !important;
    margin: 0 !important;
    color: #48443f !important;
    font-size: .98rem !important;
    line-height: 1.7 !important;
  }
}

/* Keep the quantity label and graphite-centered stepper in one row on every viewport. */
body:has(#quantity) main > section:nth-child(2) > div:has(#quantity) {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  width: min(520px, 100%);
  margin-bottom: 20px !important;
}

body:has(#quantity) main > section:nth-child(2) > div:has(#quantity) > label {
  flex: 0 0 auto;
  margin: 0 !important;
}

body:has(#quantity) main > section:nth-child(2) > div:has(#quantity) > div {
  display: inline-flex !important;
  flex: 0 0 auto;
  align-items: center !important;
  height: 42px !important;
  overflow: hidden;
  border: 1px solid #c9c4ba !important;
  border-radius: 10px !important;
  background: #fffdf8 !important;
}

body:has(#quantity) main > section:nth-child(2) > div:has(#quantity) > div > button {
  display: inline-flex !important;
  width: 42px !important;
  min-width: 42px !important;
  min-height: 40px !important;
  height: 40px !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #fffdf8 !important;
  color: #292827 !important;
  font-size: 1rem !important;
}

body:has(#quantity) #quantity {
  box-sizing: border-box !important;
  width: 42px !important;
  min-width: 42px !important;
  height: 40px !important;
  padding: 0 !important;
  border: 0 !important;
  border-right: 1px solid #484644 !important;
  border-left: 1px solid #484644 !important;
  border-radius: 0 !important;
  background: #292827 !important;
  color: #f7f4ec !important;
  text-align: center !important;
  font-size: .92rem !important;
}

/* Desktop: place the stepper below its label; leave the mobile inline layout intact. */
@media (min-width: 641px) {
  body:has(#quantity) main > section:nth-child(2) > div:has(#quantity) {
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 8px !important;
  }
}

/* The shared button styling makes the desktop picker linen, so keep its chevron visible. */
body:has(#quantity) .csk-model-trigger::after {
  border-color: #292827 !important;
}

/* Image-led editorial product gallery: make the photographs the main event. */
body:has(#quantity) main > section:first-child.csk-product-gallery {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: min(800px, calc(100svh - 76px)) !important;
  min-height: 620px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-bottom: 1px solid rgb(247 244 236 / 22%);
  background: radial-gradient(ellipse at 50% 42%, #3a3835 0%, #292827 58%, #222120 100%) !important;
}

body:has(#quantity) main > section:first-child.csk-product-gallery > div {
  position: absolute !important;
  inset: 0 0 124px !important;
  display: flex !important;
  width: 100% !important;
  height: auto !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
}

body:has(#quantity) main > section:first-child.csk-product-gallery > div > img {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: min(74vw, 700px) !important;
  max-height: calc(100% - 20px) !important;
  margin: 0 !important;
  border-radius: 0 !important;
  object-fit: contain !important;
  object-position: center;
}

body:has(#quantity) .csk-gallery-controls {
  position: absolute !important;
  inset: 0 !important;
  z-index: 6 !important;
}

body:has(#quantity) .csk-gallery-arrow {
  top: calc((100% - 124px) / 2) !important;
  width: 44px !important;
  height: 44px !important;
  border: 1px solid rgb(247 244 236 / 58%) !important;
  background: rgb(41 40 39 / 70%) !important;
  color: #f7f4ec !important;
  font-size: 26px !important;
}

body:has(#quantity) .csk-gallery-previous {
  left: max(22px, calc(50% - 390px)) !important;
}

body:has(#quantity) .csk-gallery-next {
  right: max(22px, calc(50% - 390px)) !important;
}

body:has(#quantity) .csk-gallery-thumbnails {
  position: absolute !important;
  z-index: 8 !important;
  bottom: 18px !important;
  left: 50% !important;
  display: grid !important;
  grid-template-columns: repeat(var(--csk-gallery-thumbnail-count, 3), minmax(0, 104px)) !important;
  justify-content: center !important;
  gap: 12px !important;
  width: min(336px, calc(100% - 120px)) !important;
  transform: translateX(-50%);
}

body:has(#quantity) .csk-gallery-thumbnail {
  display: flex !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  padding: 4px !important;
  border: 1px solid rgb(247 244 236 / 30%) !important;
  border-radius: 4px !important;
  background: #292827 !important;
  opacity: .66;
  cursor: pointer;
  transition: opacity 160ms ease, border-color 160ms ease, transform 160ms ease;
}

body:has(#quantity) .csk-gallery-thumbnail[aria-current="true"] {
  border: 2px solid #f7f4ec !important;
  opacity: 1;
}

body:has(#quantity) .csk-gallery-thumbnail:hover {
  opacity: .92;
  transform: translateY(-2px);
}

body:has(#quantity) .csk-gallery-thumbnail img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  object-fit: contain !important;
}

@media (max-width: 700px) {
  body:has(#quantity) main > section:first-child.csk-product-gallery {
    height: min(78svh, 700px) !important;
    min-height: 520px !important;
  }

  body:has(#quantity) main > section:first-child.csk-product-gallery > div {
    inset: 0 0 112px !important;
  }

  body:has(#quantity) main > section:first-child.csk-product-gallery > div > img {
    max-width: calc(100vw - 28px) !important;
    max-height: calc(100% - 8px) !important;
  }

  body:has(#quantity) .csk-gallery-arrow {
    top: calc((100% - 112px) / 2) !important;
    width: 38px !important;
    height: 38px !important;
  }

  body:has(#quantity) .csk-gallery-previous {
    left: 10px !important;
  }

  body:has(#quantity) .csk-gallery-next {
    right: 10px !important;
  }

  body:has(#quantity) .csk-gallery-thumbnails {
    bottom: 14px !important;
    grid-template-columns: repeat(var(--csk-gallery-thumbnail-count, 3), minmax(0, 82px)) !important;
    gap: 10px !important;
    width: min(266px, calc(100% - 96px)) !important;
  }
}

/* CSK product pages: linen editorial gallery, graphite buying experience. */
body:has(#quantity) header {
  background: #292827 !important;
  color: #f7f4ec !important;
}

body:has(#quantity) header :is(button, a, svg) {
  color: #f7f4ec !important;
}

body:has(#quantity) header > nav > div:not(#hamburger-menu) img {
  filter: brightness(0) invert(1) !important;
}

body:has(#quantity) #hamburger-menu {
  background: #f7f4ec !important;
  color: #292827 !important;
}

body:has(#quantity) #hamburger-menu :is(a, svg) {
  color: #292827 !important;
}

body:has(#quantity) main > section:first-child.csk-product-gallery {
  border-bottom: 1px solid #dedbd3 !important;
  background: #f7f4ec !important;
}

body:has(#quantity) .csk-gallery-arrow {
  border-color: #292827 !important;
  background: rgb(247 244 236 / 88%) !important;
  color: #292827 !important;
  box-shadow: 0 2px 12px rgb(41 40 39 / 8%);
}

body:has(#quantity) .csk-gallery-thumbnails {
  gap: 10px !important;
}

body:has(#quantity) .csk-gallery-thumbnail {
  padding: 0 !important;
  border: 1px solid #dedbd3 !important;
  border-radius: 3px !important;
  background: #f7f4ec !important;
  opacity: .78;
}

body:has(#quantity) .csk-gallery-thumbnail[aria-current="true"] {
  border: 2px solid #292827 !important;
  opacity: 1;
}

body:has(#quantity) .csk-gallery-thumbnail:hover {
  border-color: #77736b !important;
  opacity: 1;
}

body:has(#quantity) main > section:nth-child(2) {
  background: #292827 !important;
  color: #f7f4ec !important;
  border-top: 1px solid rgb(247 244 236 / 14%) !important;
}

body:has(#quantity) main > section:nth-child(2) :is(h1, h2, h3, p, label, a, span, strong, button:not([type="submit"])) {
  color: #f7f4ec !important;
}

body:has(#quantity) main > section:nth-child(2) > p {
  color: #d0ccc3 !important;
}

body:has(#quantity) main > section:nth-child(2) > div:has(> #phone-model) > label,
body:has(#quantity) main > section:nth-child(2) > div:has(#quantity) > label,
body:has(#quantity) [data-stock-status] {
  color: #d0ccc3 !important;
}

body:has(#quantity) .csk-model-trigger {
  border-color: #f7f4ec !important;
  background: #f7f4ec !important;
  color: #292827 !important;
}

body:has(#quantity) .csk-model-trigger .csk-model-value {
  color: #292827 !important;
}

body:has(#quantity) .csk-model-trigger::after {
  border-color: #292827 !important;
}

body:has(#quantity) main > section:nth-child(2) > div:has(#quantity) > div {
  border-color: #f7f4ec !important;
  background: #f7f4ec !important;
}

body:has(#quantity) main > section:nth-child(2) > div:has(#quantity) > div > button {
  color: #292827 !important;
}

body:has(#quantity) #quantity {
  border-color: #dedbd3 !important;
  background: #292827 !important;
  color: #f7f4ec !important;
}

body:has(#quantity) main > section:nth-child(2) > div:has([data-stock-status]) {
  border-color: rgb(247 244 236 / 24%) !important;
}

body:has(#quantity) main > section:nth-child(2) > div:last-child p {
  color: #e3dfd6 !important;
}

@media (max-width: 640px) {
  body:has(#quantity) main > section:nth-child(2) > p,
  body:has(#quantity) main > section:nth-child(2) > div:has(> #phone-model) > label,
  body:has(#quantity) main > section:nth-child(2) > div:has(#quantity) > label,
  body:has(#quantity) [data-stock-status] {
    color: #d0ccc3 !important;
  }
}

/* Blend whole transformed carousel slides against the linen gallery surface. */
body:has(#quantity) main > section:first-child.csk-product-gallery > div:first-child,
body:has(#quantity) .csk-gallery-thumbnail[aria-label^="Show image 1"],
body:has(#quantity) main > section:first-child.csk-product-gallery > div:has(> img[src*="armor2"]),
body:has(#quantity) .csk-gallery-thumbnail:has(img[src*="armor2"]) {
  mix-blend-mode: multiply !important;
}

/* Put the model label above its field, aligned like the quantity label. */
body:has(#quantity) main > section:nth-child(2) > div:has(> #phone-model) {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 8px !important;
}

/* Strong, explicit text colors keep the model selector and description readable. */
body:has(#quantity) main > section:nth-child(2) > div:has(> #phone-model) > label {
  position: static !important;
  order: 0 !important;
  display: block !important;
  margin: 0 0 2px !important;
  color: #dedbd3 !important;
  font-size: .72rem !important;
  font-weight: 650 !important;
  letter-spacing: .11em !important;
  line-height: 1.3 !important;
  text-transform: uppercase !important;
}

body:has(#quantity) main > section:nth-child(2) .csk-model-trigger .csk-model-value {
  color: #292827 !important;
  opacity: 1 !important;
}

body:has(#quantity) main > section:nth-child(2) .csk-model-options {
  border-color: #c9c4ba !important;
  background: #f7f4ec !important;
}

body:has(#quantity) main > section:nth-child(2) .csk-model-options .csk-model-option {
  color: #292827 !important;
  opacity: 1 !important;
}

body:has(#quantity) main > section:nth-child(2) .csk-model-options .csk-model-option:hover,
body:has(#quantity) main > section:nth-child(2) .csk-model-options .csk-model-option:focus-visible {
  background: #e9e5dc !important;
  color: #292827 !important;
}

body:has(#quantity) main > section:nth-child(2) .csk-model-options .csk-model-option[aria-selected="true"] {
  background: #292827 !important;
  color: #f7f4ec !important;
}

body:has(#quantity) main > section:nth-child(2) > div:has(> button:not([aria-label])):not(:has(#phone-model, #quantity)) > button {
  background: #f7f4ec !important;
  border-color: #f7f4ec !important;
  color: #292827 !important;
}

body:has(#quantity) main > section:nth-child(2) > div:last-child p {
  color: #f0ede5 !important;
}

/* Cart and checkout images use a linen frame; their white artwork blends into it. */
.csk-product-image-surface {
  display: grid;
  place-items: center;
  overflow: hidden;
  aspect-ratio: 1;
  border-radius: 10px;
  background: #f7f4ec;
  isolation: isolate;
}

.csk-cart-item > .csk-product-image-surface {
  width: clamp(120px, 16vw, 168px);
}

.csk-checkout-item > .csk-product-image-surface {
  width: 100%;
}

.csk-product-image-surface > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent !important;
}

.csk-product-image-surface > img:not([src*="freestyle"]) {
  mix-blend-mode: multiply;
}

@media (max-width: 600px) {
  .csk-cart-item > .csk-product-image-surface,
  .csk-checkout-item > .csk-product-image-surface {
    width: 100px;
  }
}

/* Keep the product option labels typographically consistent on every screen. */
body:has(#quantity) main > section:nth-child(2) > div:has(> #phone-model) > label,
body:has(#quantity) main > section:nth-child(2) > div:has(#quantity) > label {
  font-family: inherit !important;
  font-size: .72rem !important;
  font-weight: 650 !important;
  letter-spacing: .11em !important;
  line-height: 1.3 !important;
  text-transform: uppercase !important;
}

/* Match the product footer to the graphite details panel. */
html body:has(#quantity) footer.csk-site-footer {
  background: #292827 !important;
  color: #f7f4ec !important;
}

html body:has(#quantity) footer.csk-site-footer .footer-divider {
  background: rgb(247 244 236 / 22%) !important;
}

html body:has(#quantity) footer.csk-site-footer nav.footer-legal a,
html body:has(#quantity) footer.csk-site-footer nav.footer-social a {
  color: #f7f4ec !important;
}

/* Balance the gap below the quantity row with the gap above it on desktop. */
@media (min-width: 641px) {
  body:has(#quantity) main > section:nth-child(2) > div:has(#quantity) {
    margin-bottom: 34px !important;
  }
}

/* Borderline has two images, so keep its thumbnail pair centered and uniform. */
body:has(main > section:first-child > div > img[src*="borderline.webp"]) .csk-gallery-thumbnails {
  left: 50% !important;
  right: auto !important;
  width: max-content !important;
  grid-template-columns: repeat(2, 104px) !important;
  justify-content: center !important;
  transform: translateX(-50%) !important;
}

body:has(main > section:first-child > div > img[src*="borderline.webp"]) .csk-gallery-thumbnail:has(img[src*="borderlinefreestyle.webp"]) img {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  object-fit: cover !important;
  object-position: center !important;
}

body:has(main > section:first-child > div > img[src*="borderline.webp"]) .csk-gallery-thumbnail:has(img[src*="borderlinefreestyle.webp"]) {
  position: relative !important;
  overflow: hidden !important;
  padding: 0 !important;
}

@media (max-width: 700px) {
  body:has(main > section:first-child > div > img[src*="borderline.webp"]) .csk-gallery-thumbnails {
    grid-template-columns: repeat(2, 82px) !important;
  }
}

/* Keep the collection heading-to-product rhythm consistent across collections. */
body:has(main > section:first-child > h1) main:has(> section:nth-child(3) > div > article) > section:first-child {
  padding-bottom: clamp(24px, 3vw, 42px) !important;
}

body:has(main > section:first-child > h1) main:has(> section:nth-child(3) > div > article) > section:nth-child(2):not(:has(*)) {
  display: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

body:has(main > section:first-child > h1) main:has(> section:nth-child(3) > div > article) > section:nth-child(3) > h2 {
  margin: 0 !important;
  padding: 0 5vw 16px !important;
}

/* Collection pages share the product pages' graphite frame and linen canvas. */
body:has(main > section:first-child > h1):has(main > section:nth-child(3) > div > article) {
  background: #f7f4ec !important;
  color: #292827 !important;
}

body:has(main > section:first-child > h1):has(main > section:nth-child(3) > div > article) header {
  background: #292827 !important;
  color: #f7f4ec !important;
}

body:has(main > section:first-child > h1):has(main > section:nth-child(3) > div > article) header :is(button, a, svg) {
  color: #f7f4ec !important;
}

body:has(main > section:first-child > h1):has(main > section:nth-child(3) > div > article) header > nav > div:not(#hamburger-menu) img {
  filter: brightness(0) invert(1) !important;
}

body:has(main > section:first-child > h1):has(main > section:nth-child(3) > div > article) main,
body:has(main > section:first-child > h1):has(main > section:nth-child(3) > div > article) main > section {
  background: #f7f4ec !important;
  color: #292827 !important;
}

body:has(main > section:first-child > h1):has(main > section:nth-child(3) > div > article) main :is(h1, h2, h3, p, a) {
  color: #292827 !important;
}

body:has(main > section:first-child > h1):has(main > section:nth-child(3) > div > article) main > section:nth-child(3) > div > article {
  background: transparent !important;
}

body:has(main > section:first-child > h1):has(main > section:nth-child(3) > div > article) main > section:nth-child(3) > div > article > img {
  background: transparent !important;
  mix-blend-mode: multiply !important;
}

html body:has(main > section:first-child > h1):has(main > section:nth-child(3) > div > article) footer.csk-site-footer {
  background: #292827 !important;
  color: #f7f4ec !important;
}

html body:has(main > section:first-child > h1):has(main > section:nth-child(3) > div > article) footer.csk-site-footer .footer-divider {
  background: rgb(247 244 236 / 22%) !important;
}

html body:has(main > section:first-child > h1):has(main > section:nth-child(3) > div > article) footer.csk-site-footer nav a {
  color: #f7f4ec !important;
}

/* Keep the quantity stepper on the product page in the linen palette. */
body:has(#quantity) main > section:nth-child(2) > div:has(#quantity) button {
  background: #f7f4ec !important;
  color: #292827 !important;
}

/* Collection names stay editorial and compact so the product images lead. */
body:has(main > section:first-child > h1):has(main > section:nth-child(3) > div > article) main > section:first-child h1 {
  margin: 0 !important;
  font-size: clamp(1.55rem, 3.1vw, 2.4rem) !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
}

@media (max-width: 600px) {
  body:has(main > section:first-child > h1):has(main > section:nth-child(3) > div > article) main > section:first-child h1 {
    font-size: clamp(1.35rem, 5vw, 1.6rem) !important;
    letter-spacing: .07em !important;
  }
}

/* Small utility typography for account, discount and checkout feedback. */
body:has(#sign-in) .csk-form-message,
.csk-checkout-message,
#checkout-form #discount-message {
  font-size: .74rem;
  font-weight: 550;
  line-height: 1.55;
  letter-spacing: .055em;
}

body:has(#sign-in) .csk-form-message[data-state="loading"],
.csk-checkout-message[data-state="loading"],
#checkout-form #discount-message[data-state="loading"] {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  max-width: 100%;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgb(247 244 236 / 10%);
}

body:has(#sign-in) .csk-form-message[data-state="loading"]::before,
.csk-checkout-message[data-state="loading"]::before,
#checkout-form #discount-message[data-state="loading"]::before {
  width: 11px;
  height: 11px;
  flex: 0 0 11px;
  border: 1.5px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  content: "";
  animation: csk-status-spin .8s linear infinite;
}

@keyframes csk-status-spin {
  to { transform: rotate(360deg); }
}