/* ═══════════════════════════════════════════════════════════════
   Content styling for non-landing pages.

   HARD RULES, learned the hard way:
   1. Every selector is scoped inside .cf-page. The brand header and
      footer sit OUTSIDE that wrapper, so their colours can never be
      touched from this file.
   2. NO broad `a` rule. Links are coloured per-region only. A blanket
      `.cf-page a:not(...)` outranked the nav rules and turned the
      account menu orange -- never do that again.
   3. Anything overriding WooCommerce's own stylesheet is prefixed with
      body.cf-inner so it always outranks it instead of tying.
   ═══════════════════════════════════════════════════════════════ */

body.cf-inner{
  background:var(--paper);
  font:500 17px/1.6 var(--ui);
  margin:0;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* clearance for the fixed brand header */
.cf-page{padding-top:118px;min-height:60vh;color:var(--ink)}
@media(max-width:960px){.cf-page{padding-top:104px}}

.cf-page h1,.cf-page h2,.cf-page h3,.cf-page h4{
  font-family:var(--display);font-weight:700;letter-spacing:-.03em;
  line-height:1.08;color:var(--ink);text-wrap:balance;
}

.cf-main{padding-bottom:88px}
.cf-title{font-size:clamp(30px,4.2vw,46px);margin:0 0 30px}
.cf-lead{font-size:19px;line-height:1.65;color:#5A6478;max-width:56ch;margin:0 0 26px}

/* ═══ prose ═══ */
.cf-content{font-size:17px;line-height:1.7;color:#3C4658}
.cf-content > * + *{margin-top:18px}
.cf-content h2{font-size:clamp(25px,3vw,34px);margin-top:38px}
.cf-content h3{font-size:21px;margin-top:28px}
.cf-content ul,.cf-content ol{padding-left:22px}
.cf-content li{margin:7px 0}
.cf-content img{border-radius:20px;max-width:100%;height:auto}
.cf-content a:not(.btn):not(.button):not(.wp-block-button__link){
  color:var(--orange-deep);text-underline-offset:3px}
.cf-content a:not(.btn):not(.button):not(.wp-block-button__link):hover{color:var(--orange)}

/* ═══ index / archive cards ═══ */
.cf-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.cf-card{background:var(--white);border:1.5px solid var(--line);border-radius:20px;padding:26px;
  transition:translate .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s,border-color .28s}
.cf-card:hover{translate:0 -6px;box-shadow:0 18px 44px rgba(16,27,51,.09);border-color:#D9CDBE}
.cf-card h2{font-family:var(--ui);font-weight:800;font-size:19px;letter-spacing:-.01em;margin:0 0 9px}
.cf-card h2 a{color:var(--ink);text-decoration:none}
.cf-card h2 a:hover{color:var(--orange-deep)}
.cf-card p{font-size:15px;color:#5A6478;line-height:1.58;margin:0 0 14px}
.cf-more{font:700 13px var(--ui);letter-spacing:.05em;text-transform:uppercase;
  text-decoration:none;color:var(--orange-deep)}
.cf-nav{margin-top:34px}
.cf-nav a{color:var(--orange-deep);font-weight:700;text-decoration:none;padding:0 8px}

/* ═══════════════════════════════════════════════════════════════
   WooCommerce
   ═══════════════════════════════════════════════════════════════ */

.cf-page .woocommerce-message,
.cf-page .woocommerce-info,
.cf-page .woocommerce-error,
.cf-page .wc-block-components-notice-banner,
.cf-page .wc-block-components-notice-banner.is-info,
.cf-page .wc-block-components-notice-banner.is-success,
.cf-page .wc-block-components-notice-banner.is-error{
  background:var(--white);border:1.5px solid var(--line);border-left:4px solid var(--orange);
  border-radius:14px;padding:16px 20px;color:var(--ink);font-size:15px;box-shadow:none;
  margin:0 0 22px}
.cf-page .woocommerce-error{border-left-color:#C2361B}
.cf-page .wc-block-components-notice-banner .wc-block-components-notice-banner__icon svg{fill:var(--orange-deep)}
.cf-page .wc-block-components-notice-banner__content{color:var(--ink)}
.cf-page .wc-block-components-notice-banner__content a{color:var(--orange-deep);font-weight:700}
.cf-page .woocommerce-message a,.cf-page .woocommerce-info a{color:var(--orange-deep)}

/* buttons: orange ground, WHITE label, brand lip shadow */
.cf-page .woocommerce a.button,
.cf-page .woocommerce button.button,
.cf-page .woocommerce input.button,
.cf-page .woocommerce a.button.alt,
.cf-page .woocommerce button.button.alt,
.cf-page .woocommerce input.button.alt,
.cf-page .wc-block-components-button,
.cf-page .wp-block-button__link,
.cf-page .wc-block-cart__submit-button,
.cf-page button[type="submit"]{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font:700 15px/1 var(--ui);letter-spacing:.05em;text-transform:uppercase;
  padding:17px 30px;border:0;border-radius:14px;cursor:pointer;
  background:var(--orange);color:#fff;text-decoration:none;
  box-shadow:0 4px 0 var(--orange-deep);
  transition:translate .12s,filter .18s,box-shadow .12s}
.cf-page .woocommerce a.button:hover,
.cf-page .woocommerce button.button:hover,
.cf-page .woocommerce input.button:hover,
.cf-page .woocommerce a.button.alt:hover,
.cf-page .woocommerce button.button.alt:hover,
.cf-page .wc-block-components-button:hover,
.cf-page .wp-block-button__link:hover,
.cf-page button[type="submit"]:hover{background:var(--orange);filter:brightness(1.07);color:#fff}
.cf-page .woocommerce a.button:active,
.cf-page .woocommerce button.button:active,
.cf-page .wc-block-components-button:active,
.cf-page button[type="submit"]:active{translate:0 4px;box-shadow:0 0 0 var(--orange-deep)}

.cf-page .woocommerce a.button.wc-backward,
.cf-page .wc-block-components-button.outlined{
  background:var(--white);color:var(--ink);border:1.5px solid var(--line);box-shadow:none}

/* panels and tables */
.cf-page .woocommerce table.shop_table,
.cf-page .wc-block-cart,
.cf-page .wc-block-checkout,
.cf-page .woocommerce .cart_totals,
.cf-page .woocommerce-order,
.cf-page .woocommerce-customer-details{
  background:var(--white);border:1.5px solid var(--line);border-radius:20px;
  border-collapse:separate;overflow:hidden}
.cf-page .woocommerce table.shop_table th,
.cf-page .woocommerce table.shop_table td{border-color:var(--line);padding:16px 18px;font-size:15px}
.cf-page .woocommerce table.shop_table th{font:700 11.5px var(--ui);letter-spacing:.13em;
  text-transform:uppercase;color:#7C879B}

/* ═══════════════════════════════════════════════════════════════
   MY ACCOUNT
   ═══════════════════════════════════════════════════════════════ */

body.cf-inner.woocommerce-account .woocommerce{
  display:grid;grid-template-columns:250px minmax(0,1fr);gap:26px;align-items:start}
@media(max-width:900px){
  body.cf-inner.woocommerce-account .woocommerce{grid-template-columns:1fr;gap:18px}}

/* the menu card */
body.cf-inner .woocommerce-MyAccount-navigation{margin:0}
body.cf-inner.woocommerce-account .woocommerce-MyAccount-navigation ul{
  list-style:none;margin:0;padding:8px;
  background:var(--white);border:1.5px solid var(--line);border-radius:20px;
  box-shadow:0 8px 26px rgba(16,27,51,.05)}
/* Woo's block-theme sheet puts padding:1em 0 on every item -- that is what
   spread the menu over 700px. Reset it, then own the spacing on the link. */
body.cf-inner.woocommerce-account .woocommerce-MyAccount-navigation li,
body.cf-inner.woocommerce-account .woocommerce-MyAccount-navigation li:first-child{
  list-style:none;padding:0;margin:0 0 2px;border:0}
body.cf-inner.woocommerce-account .woocommerce-MyAccount-navigation li:last-child{margin-bottom:0}
body.cf-inner.woocommerce-account .woocommerce-MyAccount-navigation li a{
  display:block;padding:12px 15px;border-radius:13px;
  font:700 14.5px/1.3 var(--ui);color:var(--ink);text-decoration:none;
  transition:background .18s,color .18s}
body.cf-inner.woocommerce-account .woocommerce-MyAccount-navigation li a:hover{
  background:rgba(244,83,31,.08);color:var(--orange-deep);text-decoration:none}
body.cf-inner.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
body.cf-inner.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a:hover{
  background:var(--orange);color:#fff;text-decoration:none;
  box-shadow:0 3px 0 var(--orange-deep)}
/* log out sits apart from the navigation proper */
body.cf-inner.woocommerce-account .woocommerce-MyAccount-navigation li--logout{
  margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}

/* the content card */
body.cf-inner .woocommerce-MyAccount-content{
  background:var(--white);border:1.5px solid var(--line);border-radius:20px;
  padding:32px;box-shadow:0 8px 26px rgba(16,27,51,.05);
  font-size:16px;line-height:1.7;color:#3C4658}
body.cf-inner .woocommerce-MyAccount-content > * + *{margin-top:18px}
body.cf-inner .woocommerce-MyAccount-content p{margin:0}
body.cf-inner .woocommerce-MyAccount-content strong{color:var(--ink);font-weight:700}
body.cf-inner .woocommerce-MyAccount-content a:not(.button):not(.btn){
  color:var(--orange-deep);text-underline-offset:3px}
body.cf-inner .woocommerce-MyAccount-content a:not(.button):not(.btn):hover{color:var(--orange)}
@media(max-width:560px){body.cf-inner .woocommerce-MyAccount-content{padding:22px}}

/* ═══ forms ═══ */
.cf-page input[type="text"],.cf-page input[type="email"],
.cf-page input[type="password"],.cf-page input[type="tel"],
.cf-page input[type="number"],.cf-page input[type="search"],
.cf-page input[type="url"],
.cf-page textarea,.cf-page select,
.cf-page .wc-block-components-text-input input{
  width:100%;background:var(--white);border:1.5px solid var(--line);border-radius:13px;
  padding:13px 15px;font:500 15px var(--ui);color:var(--ink);
  transition:border-color .18s,box-shadow .18s}
.cf-page input:focus,.cf-page textarea:focus,.cf-page select:focus{
  outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(244,83,31,.18)}
.cf-page label,
.cf-page .woocommerce form .form-row label{
  font:700 13px/1.4 var(--ui);letter-spacing:.01em;color:#4A556B;
  margin:0 0 7px;display:block}
.cf-page .required{color:var(--orange);text-decoration:none;border:0}
.cf-page .woocommerce form .form-row{margin:0 0 18px;padding:0}
.cf-page .woocommerce form .form-row-first,
.cf-page .woocommerce form .form-row-last{width:calc(50% - 9px);float:none;display:inline-block;
  vertical-align:top}
.cf-page .woocommerce form .form-row-first{margin-right:14px}
@media(max-width:560px){
  .cf-page .woocommerce form .form-row-first,
  .cf-page .woocommerce form .form-row-last{width:100%;margin-right:0}}
.cf-page .woocommerce form .form-row span em,
.cf-page form em{display:block;margin-top:7px;font-size:13px;font-style:normal;color:#7C879B;line-height:1.5}

/* password-change fieldset */
.cf-page .woocommerce fieldset{
  border:1.5px solid var(--line);border-radius:16px;padding:22px;margin:26px 0 22px;
  background:var(--paper)}
.cf-page .woocommerce fieldset legend{
  font:700 11.5px var(--ui);letter-spacing:.14em;text-transform:uppercase;color:#7C879B;
  padding:0 10px;margin-left:-4px}
.cf-page .woocommerce fieldset .form-row:last-child{margin-bottom:0}

/* the save button row */
.cf-page .woocommerce-EditAccountForm > p:last-of-type,
.cf-page .woocommerce-form-login__submit{margin-top:6px}

/* login / register forms */
.cf-page .woocommerce-form-login,
.cf-page .woocommerce-form-register{
  background:var(--white);border:1.5px solid var(--line);border-radius:20px;padding:30px;
  box-shadow:0 8px 26px rgba(16,27,51,.05);max-width:520px}
.cf-page .woocommerce-form-login-toggle,
.cf-page .woocommerce-form__label-for-checkbox{font-size:15px}
.cf-page .woocommerce-LostPassword a{color:var(--orange-deep)}

/* orders / downloads tables sit flush in the content card */
body.cf-inner .woocommerce-MyAccount-content table.shop_table{margin:0}
body.cf-inner .woocommerce-MyAccount-content .woocommerce-Message{
  background:var(--paper);border:1.5px solid var(--line);border-radius:14px;padding:20px}

/* ═══ product grid ═══ */
.cf-page .woocommerce ul.products li.product{
  background:var(--white);border:1.5px solid var(--line);border-radius:20px;padding:18px;
  transition:translate .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s,border-color .28s}
.cf-page .woocommerce ul.products li.product:hover{
  translate:0 -6px;box-shadow:0 18px 44px rgba(16,27,51,.1);border-color:#D9CDBE}
.cf-page .woocommerce ul.products li.product img{border-radius:14px;margin-bottom:14px}
.cf-page .woocommerce ul.products li.product a{text-decoration:none}
.cf-page .woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--ui);font-weight:800;font-size:17px;letter-spacing:-.01em;padding:0;color:var(--ink)}
.cf-page .woocommerce ul.products li.product .price,
.cf-page .woocommerce div.product p.price,
.cf-page .woocommerce div.product span.price{color:var(--orange-deep);font-weight:800}
.cf-page .woocommerce span.onsale{
  background:var(--orange);color:#fff;border-radius:999px;font:700 11px var(--ui);
  letter-spacing:.11em;text-transform:uppercase;padding:7px 14px;box-shadow:0 3px 0 var(--orange-deep);
  min-height:0;min-width:0;line-height:1}
.cf-page .woocommerce .woocommerce-result-count,
.cf-page .woocommerce .woocommerce-breadcrumb{color:#7C879B;font-size:14.5px}
.cf-page .woocommerce .woocommerce-breadcrumb a{color:var(--orange-deep);text-decoration:none}
.cf-page .woocommerce div.product .product_title{font-size:clamp(28px,4vw,44px)}

/* empty cart */
.cf-page .wp-block-woocommerce-empty-cart-block img,
.cf-page .wc-block-cart__empty-cart__title img{display:none}
.cf-page .wc-block-cart__empty-cart__title,
.cf-page .wp-block-woocommerce-empty-cart-block h2{
  font-family:var(--display);font-size:clamp(26px,3.4vw,38px);color:var(--ink)}

/* ═══ 404 / coming-soon message page ═══ */
.nf-main{display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;min-height:58vh;padding-top:30px}
.nf-fig{width:240px;max-width:58vw;margin-bottom:14px;animation:nf-float 3.2s ease-in-out infinite}
@keyframes nf-float{0%,100%{translate:0 0}50%{translate:0 -14px}}
.nf-code{font:700 12px/1 var(--ui);letter-spacing:.17em;text-transform:uppercase;
  color:var(--orange-deep);margin-bottom:14px}
.nf-title{font-family:var(--display);font-weight:700;letter-spacing:-.03em;line-height:1.05;
  font-size:clamp(30px,5vw,52px);margin:0 0 16px;max-width:18ch}
.nf-body{font-size:18px;line-height:1.6;color:#5A6478;max-width:46ch;margin:0 0 30px}
@media(prefers-reduced-motion:reduce){.nf-fig{animation:none}}

/* ═══════════════════════════════════════════════════════════════
   Specificity overrides.

   WooCommerce ships `.woocommerce form.login {border-radius:5px;padding:20px}`
   and `.woocommerce form .form-row input.input-text` -- both outrank the
   plain rules above, so the branded versions are repeated here with a
   body.cf-inner prefix to win cleanly instead of resorting to !important.
   ═══════════════════════════════════════════════════════════════ */

body.cf-inner .cf-page input[type="text"],
body.cf-inner .cf-page input[type="email"],
body.cf-inner .cf-page input[type="password"],
body.cf-inner .cf-page input[type="tel"],
body.cf-inner .cf-page input[type="number"],
body.cf-inner .cf-page input[type="search"],
body.cf-inner .cf-page input[type="url"],
body.cf-inner .cf-page textarea,
body.cf-inner .cf-page select,
body.cf-inner .cf-page .woocommerce form .form-row input.input-text,
body.cf-inner .cf-page .woocommerce form .form-row textarea,
body.cf-inner .cf-page .woocommerce form .form-row select,
body.cf-inner .cf-page .wc-block-components-text-input input{
  width:100%;box-sizing:border-box;
  background:var(--white);border:1.5px solid var(--line);border-radius:13px;
  padding:13px 15px;font:500 15px var(--ui);color:var(--ink);line-height:1.4;
  transition:border-color .18s,box-shadow .18s}
body.cf-inner .cf-page input:focus,
body.cf-inner .cf-page textarea:focus,
body.cf-inner .cf-page select:focus,
body.cf-inner .cf-page .woocommerce form .form-row input.input-text:focus{
  outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(244,83,31,.18)}

/* login / register cards */
body.cf-inner .cf-page .woocommerce form.login,
body.cf-inner .cf-page .woocommerce form.register,
body.cf-inner .cf-page form.woocommerce-form-login,
body.cf-inner .cf-page form.woocommerce-form-register{
  background:var(--white);border:1.5px solid var(--line);border-radius:20px;
  padding:30px;margin:0 0 26px;box-shadow:0 8px 26px rgba(16,27,51,.05);max-width:520px}
@media(max-width:560px){
  body.cf-inner .cf-page .woocommerce form.login,
  body.cf-inner .cf-page form.woocommerce-form-login{padding:22px}}

/* password visibility toggle sits inside the field, not on top of the border */
body.cf-inner .cf-page .woocommerce form .password-input,
body.cf-inner .cf-page .woocommerce-password-input{display:block;position:relative;width:100%}
body.cf-inner .cf-page .woocommerce form .show-password-input{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  padding:0;border:0;background:none;cursor:pointer}

/* the .form-row label rule above outranks a plain class selector, so the
   checkbox label needs the full chain to win */
body.cf-inner .cf-page .woocommerce form .form-row label.woocommerce-form__label-for-checkbox,
body.cf-inner .cf-page .woocommerce form .form-row label.woocommerce-form-login__rememberme{
  display:flex;align-items:center;gap:9px;
  font:600 14.5px var(--ui);color:#4A556B;margin:0}

/* checkbox row reads as one line */
body.cf-inner .cf-page .woocommerce-form-login__rememberme,
body.cf-inner .cf-page .woocommerce-form__label-for-checkbox{
  display:flex;align-items:center;gap:9px;font:600 14.5px var(--ui);color:#4A556B;margin:0 0 18px}
body.cf-inner .cf-page .woocommerce-form__label-for-checkbox input[type="checkbox"],
body.cf-inner .cf-page input[type="checkbox"]{width:17px;height:17px;accent-color:var(--orange);
  margin:0;flex:none}
body.cf-inner .cf-page .woocommerce-form-login__rememberme span{margin:0}

/* section headings inside account/login content */
body.cf-inner .cf-page .woocommerce > h2,
body.cf-inner .cf-page .woocommerce-MyAccount-content h2,
body.cf-inner .cf-page h2.woocommerce-column__title{
  font-family:var(--display);font-size:clamp(22px,2.6vw,28px);letter-spacing:-.025em;
  color:var(--ink);margin:0 0 18px}

body.cf-inner .cf-page .woocommerce-LostPassword{margin:14px 0 0}
body.cf-inner .cf-page .woocommerce-LostPassword a{
  font:700 14px var(--ui);color:var(--orange-deep);text-decoration:none;text-underline-offset:3px}
body.cf-inner .cf-page .woocommerce-LostPassword a:hover{text-decoration:underline}

@media(max-width:820px){
  .cf-main{padding-bottom:64px}
  .cf-title{margin-bottom:22px}
}


/* clearance for the fixed announcement strip (see landing.css --annc-h) */
.cf-page{padding-top:calc(118px + var(--annc-h,0px))}