.clx-ticket-centre,.clx-ticket-detail{--clx-ticket-ink:#211f1b;--clx-ticket-muted:#716b62;--clx-ticket-line:#ded7cd;--clx-ticket-soft:#f6f2ec;--clx-ticket-gold:var(--clx-gold,#b48a4a);color:var(--clx-ticket-ink)} .clx-ticket-centre__header,.clx-ticket-detail__header{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin:0 0 28px;padding:0 0 24px;border-bottom:1px solid var(--clx-ticket-line)} .clx-ticket-centre__header h2,.clx-ticket-detail__header h2{margin:4px 0 8px;font-family:var(--clx-serif,Georgia,serif);font-size:clamp(34px,5vw,54px);font-weight:500;line-height:1.02}.clx-ticket-centre__header p,.clx-ticket-detail__header p{max-width:720px;margin:0;color:var(--clx-ticket-muted);line-height:1.7}.clx-ticket-eyebrow,.clx-ticket-ref{color:var(--clx-ticket-gold);font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.clx-ticket-new-toggle{white-space:nowrap} .clx-ticket-success,.clx-ticket-error,.clx-ticket-dashboard-notice{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 24px;padding:16px 18px;border:1px solid #b8d5c0;background:#edf8f0;color:#245c35}.clx-ticket-error{border-color:#e2b4ae;background:#fff0ee;color:#8f3025}.clx-ticket-dashboard-notice{display:block}.clx-ticket-dashboard-notice a{font-weight:800;color:inherit} .clx-ticket-new{margin:0 0 34px;padding:clamp(22px,4vw,38px);border:1px solid var(--clx-ticket-line);border-radius:24px;background:linear-gradient(145deg,#fff,#f8f4ee);box-shadow:0 24px 64px rgba(35,29,20,.08)}.clx-ticket-new[hidden]{display:none!important}.clx-ticket-new__heading h3{margin:0 0 6px;font-family:var(--clx-serif,Georgia,serif);font-size:30px}.clx-ticket-new__heading p{margin:0 0 24px;color:var(--clx-ticket-muted)} .clx-ticket-form{display:grid;grid-template-columns:1fr 1fr;gap:20px}.clx-ticket-field{display:grid;gap:8px}.clx-ticket-field--wide,.clx-ticket-form__footer{grid-column:1/-1}.clx-ticket-field>span{font-size:13px;font-weight:750}.clx-ticket-field b{color:#a0362d}.clx-ticket-field small{font-weight:500;color:var(--clx-ticket-muted)}.clx-ticket-field input,.clx-ticket-field select,.clx-ticket-field textarea,.clx-ticket-reply textarea{width:100%!important;max-width:none!important;margin:0!important;padding:14px 15px!important;border:1px solid #cfc6b9!important;border-radius:12px!important;background:#fff!important;color:var(--clx-ticket-ink)!important;font:inherit!important}.clx-ticket-field input,.clx-ticket-field select{min-height:52px}.clx-ticket-field textarea,.clx-ticket-reply textarea{resize:vertical}.clx-ticket-form__footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:4px}.clx-ticket-form__footer p{margin:0;color:var(--clx-ticket-muted);font-size:13px} .clx-ticket-list__heading{display:flex;align-items:center;justify-content:space-between;margin:0 0 14px}.clx-ticket-list__heading h3{margin:0;font-family:var(--clx-serif,Georgia,serif);font-size:30px}.clx-ticket-list__heading>span{display:grid;place-items:center;min-width:34px;height:34px;border-radius:999px;background:var(--clx-ticket-ink);color:#fff;font-weight:800}.clx-ticket-empty{padding:34px;border:1px dashed var(--clx-ticket-line);border-radius:18px;text-align:center}.clx-ticket-empty h4{margin:0 0 8px;font-size:20px}.clx-ticket-empty p{margin:0;color:var(--clx-ticket-muted)} .clx-ticket-card{margin:0 0 12px;border:1px solid var(--clx-ticket-line);border-radius:18px;background:#fff;transition:.2s ease}.clx-ticket-card:hover{transform:translateY(-2px);border-color:#bfa98a;box-shadow:0 16px 38px rgba(35,29,20,.08)}.clx-ticket-card.has-unread{border-left:5px solid var(--clx-ticket-gold)}.clx-ticket-card>a{display:block;padding:20px;text-decoration:none!important;color:inherit!important}.clx-ticket-card__top,.clx-ticket-card__meta{display:flex;align-items:center;justify-content:space-between;gap:14px}.clx-ticket-card h4{margin:14px 0 12px;font-size:20px}.clx-ticket-card__meta{justify-content:flex-start;flex-wrap:wrap;color:var(--clx-ticket-muted);font-size:13px}.clx-ticket-card__meta span+span:before{content:'•';margin-right:14px}.clx-ticket-card__meta strong{margin-left:auto;color:var(--clx-ticket-gold)} .clx-ticket-status{display:inline-flex;align-items:center;min-height:30px;padding:6px 10px;border-radius:999px;background:#ece8e1;color:#514b43;font-size:11px;font-weight:800;letter-spacing:.03em}.clx-ticket-status.is-awaiting-admin,.clx-ticket-status.is-open{background:#fff0d9;color:#8a5b13}.clx-ticket-status.is-awaiting-customer{background:#e7f1ff;color:#245d95}.clx-ticket-status.is-resolved{background:#e5f5e8;color:#23613a}.clx-ticket-status.is-closed{background:#ececec;color:#555} .clx-ticket-back{display:inline-flex;margin:0 0 22px;color:var(--clx-ticket-ink);font-weight:800;text-decoration:none}.clx-ticket-related{display:flex;justify-content:space-between;gap:16px;margin:0 0 20px;padding:14px 16px;border-radius:12px;background:var(--clx-ticket-soft)}.clx-ticket-related span{color:var(--clx-ticket-muted)} .clx-ticket-conversation{display:grid;gap:16px;margin:0 0 26px}.clx-ticket-message{max-width:88%;padding:20px;border:1px solid var(--clx-ticket-line);border-radius:20px 20px 20px 6px;background:#fff}.clx-ticket-message.is-admin{justify-self:end;border-radius:20px 20px 6px 20px;border-color:#d9c29d;background:#fbf5ea}.clx-ticket-message__meta{display:flex;justify-content:space-between;gap:18px;margin-bottom:10px}.clx-ticket-message__meta time{color:var(--clx-ticket-muted);font-size:12px}.clx-ticket-message__body p:last-child{margin-bottom:0}.clx-ticket-reply{padding:24px;border:1px solid var(--clx-ticket-line);border-radius:18px;background:var(--clx-ticket-soft)}.clx-ticket-reply h3{margin:0 0 14px}.clx-ticket-reply form>div{display:flex;justify-content:flex-end;margin-top:14px}.clx-ticket-closed{padding:18px;border-radius:12px;background:#ece9e4;color:#5f5a53} .clx-account-navigation__badge{display:inline-grid;place-items:center;min-width:24px;height:24px;margin-left:auto;padding:0 7px;border-radius:999px;background:var(--clx-gold,#b48a4a);color:#fff;font-size:11px;font-weight:800} @media(max-width:767px){.clx-ticket-centre__header,.clx-ticket-detail__header{display:grid}.clx-ticket-new-toggle{width:100%}.clx-ticket-form{grid-template-columns:1fr}.clx-ticket-field--wide,.clx-ticket-form__footer{grid-column:1}.clx-ticket-form__footer{align-items:stretch;flex-direction:column}.clx-ticket-form__footer .button{width:100%}.clx-ticket-success{align-items:flex-start;flex-direction:column}.clx-ticket-card__top,.clx-ticket-card__meta{align-items:flex-start}.clx-ticket-card__meta strong{width:100%;margin-left:0}.clx-ticket-message{max-width:100%}.clx-ticket-message__meta{align-items:flex-start;flex-direction:column;gap:4px}} /* v1.5.7.1 — mobile/tablet account containment and readable ticket actions. */ .clx-ticket-centre,.clx-ticket-detail,.clx-ticket-centre *,.clx-ticket-detail *{box-sizing:border-box} .clx-ticket-centre,.clx-ticket-detail,.clx-ticket-centre__header>*,.clx-ticket-detail__header>*,.clx-ticket-new,.clx-ticket-form,.clx-ticket-field,.clx-ticket-form__footer{min-width:0;max-width:100%} .clx-ticket-centre :is(h2,h3,h4,p,span,label,small,strong,a),.clx-ticket-detail :is(h2,h3,h4,p,span,label,small,strong,a){overflow-wrap:anywhere;word-break:normal} .clx-ticket-new-toggle,.clx-ticket-form__footer .button,.clx-ticket-reply .button{display:inline-flex!important;align-items:center!important;justify-content:center!important;max-width:100%!important;min-width:0!important;text-align:center!important;white-space:normal!important;background:#211f1b!important;border-color:#211f1b!important;color:#fff!important;-webkit-text-fill-color:#fff!important} @media(min-width:768px) and (max-width:1100px){.clx-ticket-centre__header,.clx-ticket-detail__header{gap:18px}.clx-ticket-form{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:767px){.clx-ticket-centre__header,.clx-ticket-detail__header{grid-template-columns:1fr!important;gap:16px!important}.clx-ticket-centre__header h2,.clx-ticket-detail__header h2{font-size:clamp(32px,10vw,44px)!important}.clx-ticket-centre__header p,.clx-ticket-detail__header p{font-size:14px;line-height:1.6}.clx-ticket-new{padding:22px 14px;border-radius:18px}.clx-ticket-new__heading h3{font-size:clamp(27px,8vw,36px)}.clx-ticket-field input,.clx-ticket-field select,.clx-ticket-field textarea,.clx-ticket-reply textarea{width:100%!important;max-width:100%!important;min-width:0!important;font-size:15px!important;line-height:1.5!important}.clx-ticket-field textarea{min-height:170px}.clx-ticket-new-toggle,.clx-ticket-form__footer .button,.clx-ticket-reply .button{width:100%!important;min-height:46px!important}} /* v1.5.7.2 — definitive inline-account responsive reset. * WooCommerce account navigation historically applies white-space: nowrap to * menu items. Because the responsive account accordion moves endpoint content * inside the active
  • , that inherited value must be reset at the ticket root. */ body.woocommerce-account .woocommerce-MyAccount-navigation.is-inline-accordion li > .woocommerce-MyAccount-content, body.woocommerce-account .woocommerce-MyAccount-navigation.is-inline-accordion li > .woocommerce-MyAccount-content .clx-ticket-centre, body.woocommerce-account .woocommerce-MyAccount-navigation.is-inline-accordion li > .woocommerce-MyAccount-content .clx-ticket-detail, body.woocommerce-account .clx-ticket-centre, body.woocommerce-account .clx-ticket-detail { width: 100% !important; max-width: 100% !important; min-width: 0 !important; white-space: normal !important; overflow-wrap: normal !important; word-break: normal !important; } body.woocommerce-account .clx-ticket-centre :is(header,section,div,form,label,h2,h3,h4,p,span,small,strong), body.woocommerce-account .clx-ticket-detail :is(header,section,div,form,label,h2,h3,h4,p,span,small,strong) { max-width: 100% !important; min-width: 0 !important; white-space: normal !important; word-break: normal !important; overflow-wrap: break-word !important; } body.woocommerce-account .clx-ticket-centre__header > div, body.woocommerce-account .clx-ticket-detail__header > div, body.woocommerce-account .clx-ticket-new__heading, body.woocommerce-account .clx-ticket-list, body.woocommerce-account .clx-ticket-empty { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } body.woocommerce-account .clx-ticket-centre__header p, body.woocommerce-account .clx-ticket-detail__header p, body.woocommerce-account .clx-ticket-new__heading p, body.woocommerce-account .clx-ticket-form__footer p, body.woocommerce-account .clx-ticket-empty p { display: block !important; width: 100% !important; max-width: 100% !important; white-space: normal !important; line-height: 1.55 !important; } body.woocommerce-account .clx-ticket-form, body.woocommerce-account .clx-ticket-field, body.woocommerce-account .clx-ticket-form__footer { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } body.woocommerce-account .clx-ticket-field :is(input,select,textarea), body.woocommerce-account .clx-ticket-reply textarea { box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; } @media (min-width: 768px) and (max-width: 1100px) { body.woocommerce-account .clx-ticket-centre__header, body.woocommerce-account .clx-ticket-detail__header { grid-template-columns: minmax(0, 1fr) auto !important; } body.woocommerce-account .clx-ticket-centre__header h2, body.woocommerce-account .clx-ticket-detail__header h2 { font-size: clamp(38px, 5.2vw, 50px) !important; } body.woocommerce-account .clx-ticket-centre__header p, body.woocommerce-account .clx-ticket-detail__header p, body.woocommerce-account .clx-ticket-new__heading p, body.woocommerce-account .clx-ticket-form__footer p, body.woocommerce-account .clx-ticket-empty p { font-size: 14px !important; } } @media (max-width: 767px) { body.woocommerce-account .clx-ticket-centre, body.woocommerce-account .clx-ticket-detail { overflow: hidden !important; } body.woocommerce-account .clx-ticket-centre__header, body.woocommerce-account .clx-ticket-detail__header { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; gap: 14px !important; margin-bottom: 22px !important; padding-bottom: 18px !important; } body.woocommerce-account .clx-ticket-centre__header h2, body.woocommerce-account .clx-ticket-detail__header h2 { font-size: clamp(34px, 9.5vw, 42px) !important; line-height: 1.02 !important; letter-spacing: -.02em !important; } body.woocommerce-account .clx-ticket-centre__header p, body.woocommerce-account .clx-ticket-detail__header p, body.woocommerce-account .clx-ticket-new__heading p, body.woocommerce-account .clx-ticket-form__footer p, body.woocommerce-account .clx-ticket-empty p { font-size: 13px !important; line-height: 1.55 !important; } body.woocommerce-account .clx-ticket-new { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin-bottom: 28px !important; padding: 20px 14px !important; border-radius: 18px !important; overflow: hidden !important; } body.woocommerce-account .clx-ticket-new__heading h3, body.woocommerce-account .clx-ticket-list__heading h3 { font-size: clamp(27px, 7.8vw, 34px) !important; line-height: 1.08 !important; } body.woocommerce-account .clx-ticket-list__heading { width: 100% !important; max-width: 100% !important; min-width: 0 !important; gap: 12px !important; } body.woocommerce-account .clx-ticket-list__heading > span { flex: 0 0 36px !important; min-width: 36px !important; width: 36px !important; height: 36px !important; } body.woocommerce-account .clx-ticket-empty { padding: 26px 14px !important; border-radius: 17px !important; } body.woocommerce-account .clx-ticket-empty h4 { font-size: 18px !important; line-height: 1.3 !important; } body.woocommerce-account .clx-ticket-form { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 16px !important; } body.woocommerce-account .clx-ticket-form__footer { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 14px !important; } } @media (max-width: 390px) { body.woocommerce-account .clx-ticket-centre__header h2, body.woocommerce-account .clx-ticket-detail__header h2 { font-size: 32px !important; } body.woocommerce-account .clx-ticket-new__heading h3, body.woocommerce-account .clx-ticket-list__heading h3 { font-size: 26px !important; } body.woocommerce-account .clx-ticket-new { padding-left: 11px !important; padding-right: 11px !important; } }