/* customised-cakes.css — page only. Every class starts with cc- so nothing
   here can clash with common.css or index1.css. Brand tokens come from
   common.css (:root). */
.cc-page{--cc-navy:#19325C;--cc-gold:#CDAF8C;--cc-rust:#84461F;--cc-ink:#425671;--cc-paper:#F5F8FC;--cc-line:#D9DDE3;--cc-err:#B3261E;background:#E1E1DC;color:var(--cc-ink);font-family:var(--font-secondary);margin:0}
.cc-page *,.cc-page *::before,.cc-page *::after{box-sizing:border-box}
.cc-page h1,.cc-page h2,.cc-page h3{font-family:var(--font-primary);font-style:italic;font-weight:400;color:var(--cc-navy);margin:0}
/*.cc-wrap{padding-inline:var(--gutter)}*/

/* placeholder shown until a real image file exists */
.cc-ph{display:block;width:100%;height:100%;background:linear-gradient(135deg,#EDE7DF,#DCC091)}

/* ---------- hero: image only ----------
   aspect-ratio reserves the space so the page does not jump. Set it to
   your real banner sizes (width/height). */
.cc-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.cc-hero{margin:0 var(--gutter) 40px;border-radius:5px;overflow:hidden;background:#EFE6DA;aspect-ratio:1350/300}
.cc-hero picture,.cc-hero img,.cc-hero .cc-ph{display:block;width:100%;height:100%}
.cc-hero img{object-fit:cover}

/* ---------- main two column layout ---------- */
.cc-main{display:grid;grid-template-columns:1fr minmax(340px,540px);grid-template-areas:"inspire form" "why form";gap:40px 56px;padding:10px var(--gutter) 70px;align-items:start}
.cc-inspire{grid-area:inspire}.cc-why{grid-area:why}.cc-form-card{grid-area:form}
.cc-h2{font-size:34px;line-height:1.2}
.cc-lead{margin:6px 0 22px;font-size:16px}

.cc-ideas{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;list-style:none;margin:0;padding:0}
.cc-idea{display:block;background:#F0EAE2;border-radius:10px;padding:8px 8px 0;color:var(--cc-navy)}
.cc-idea-img{aspect-ratio:1/1;border-radius:8px;overflow:hidden}
.cc-idea-img img{width:100%;height:100%;object-fit:cover;display:block;transition:filter .3s;border-radius:5px;}
.cc-idea:hover .cc-idea-img img{filter:sepia(.3) saturate(1.4) brightness(.92)}
.cc-idea-name{display:block;padding:12px 4px;text-align:center;font-size:15px;font-weight:500}
.cc-more{display:flex;width:max-content;align-items:center;gap:8px;margin:22px auto 0;color:var(--cc-rust);font-weight:500;font-size:15px}
.cc-more:hover{color:var(--cc-navy)}

.cc-why-list{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;list-style:none;margin:22px 0 0;padding:0;text-align:center}
.cc-why-list li{font-size:14px;line-height:1.35;color:var(--cc-navy)}
.cc-why-ico{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 10px;border-radius:50%;background:#F0EAE2}
.cc-why-ico svg{width:28px;height:28px;stroke:var(--cc-rust)}

/* ---------- form ---------- */
.cc-form-card{background:var(--cc-paper);border-radius:14px;padding:28px 26px;box-shadow:0 10px 30px rgba(25,50,92,.1);position:sticky;top:16px}
.cc-form-card h2{font-size:28px}
.cc-form-note{margin:6px 0 20px;font-size:14px;line-height:1.5}
.cc-field{margin-bottom:14px}
.cc-field label{display:block;margin-bottom:6px;font-size:14px;font-weight:500;color:var(--cc-navy)}
.cc-field label i{color:var(--cc-err);font-style:normal}
.cc-input,.cc-select,.cc-area{width:100%;height:46px;border:1px solid var(--cc-line);border-radius:8px;background:#fff;padding:0 14px;font:400 14px var(--font-secondary);color:var(--cc-navy);appearance:none}
.cc-select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%2319325C' stroke-width='1.6'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
.cc-area{height:110px;padding:12px 14px;resize:vertical;line-height:1.5}
.cc-input::placeholder,.cc-area::placeholder{color:#8892A6}
.cc-input:focus-visible,.cc-select:focus-visible,.cc-area:focus-visible,.cc-drop:focus-within{outline:2px solid var(--cc-navy);outline-offset:1px}
.cc-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cc-count{display:block;text-align:right;font-size:12px;margin-top:4px}
.cc-err{display:none;margin:5px 0 0;font-size:12.5px;color:var(--cc-err)}
.cc-field.is-bad .cc-input,.cc-field.is-bad .cc-select,.cc-field.is-bad .cc-area,.cc-field.is-bad .cc-drop{border-color:var(--cc-err)}
.cc-field.is-bad .cc-err{display:block}
.cc-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.cc-drop{position:relative;display:block;border:1.5px dashed var(--cc-gold);border-radius:10px;background:#fff;padding:18px 14px;text-align:center;cursor:pointer}
.cc-drop svg{width:26px;height:26px;stroke:var(--cc-navy)}
.cc-drop strong{display:block;font-size:14px;color:var(--cc-navy);margin-top:4px;overflow-wrap:anywhere}
.cc-drop small{font-size:12px}
.cc-drop input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}

.cc-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;height:48px;border:0;background:var(--cc-navy);color:var(--cc-paper);font:500 15px var(--font-secondary);cursor:pointer;transition:background .25s;clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px)}
.cc-btn:hover{background:var(--cc-rust)}
.cc-btn:focus-visible{outline:2px solid var(--cc-rust);outline-offset:2px}
.cc-btn:disabled{opacity:.6;cursor:wait}
.cc-min{margin:10px 0 0;font-size:12px;line-height:1.4;text-align:center}
.cc-status{display:none;margin:14px 0 0;padding:12px 14px;border-radius:8px;font-size:14px;line-height:1.5}
.cc-status.is-ok{display:block;background:#E6F3EB;color:#1E7A46}
.cc-status.is-fail{display:block;background:#FBE9E7;color:var(--cc-err)}

/* ---------- trust strip (same look as index, own classes) ---------- */
.cc-trust{display:flex;background:#F6F7F8;padding:28px var(--gutter);list-style:none;margin:0}
.cc-trust-item{flex:1;display:flex;align-items:center;gap:16px;padding:0 32px;position:relative}
.cc-trust-item:first-child{padding-left:0}
.cc-trust-item:not(:last-child)::after{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);width:1px;height:56px;background:#E3E6EA}
.cc-trust-item svg{width:44px;height:44px;flex:none;stroke:var(--cc-rust)}
.cc-trust-item b{display:block;font-weight:400;font-size:17px;color:var(--cc-navy)}
.cc-trust-item span{font-size:14px}

/* ---------- tablet ---------- */
@media (max-width:1100px){
  .cc-main{grid-template-columns:1fr minmax(320px,460px);gap:32px}
  .cc-ideas{grid-template-columns:repeat(2,1fr)}
  .cc-why-list{grid-template-columns:repeat(2,1fr)}
  .cc-trust-item{padding:0 16px}
}
/* ---------- mobile: banner, then form, then the rest ---------- */
@media (max-width:860px){
  .cc-main{grid-template-columns:1fr;grid-template-areas:"form" "inspire" "why";gap:32px;padding-bottom:40px}
  .cc-form-card{position:static;padding:22px 16px}
  .cc-h2{font-size:28px}
  .cc-ideas{grid-template-columns:repeat(3,1fr);gap:10px}
  .cc-idea-name{font-size:13px;padding:8px 2px}
  .cc-why-list{grid-template-columns:repeat(4,1fr);gap:8px}
  .cc-why-list li{font-size:12px}
  .cc-why-ico{width:54px;height:54px}
  .cc-trust{flex-direction:column;gap:20px;padding:24px 20px}
  .cc-trust-item{padding:0}
  .cc-trust-item:not(:last-child)::after{right:auto;left:0;top:auto;bottom:-10px;width:100%;height:1px;transform:none}
}
@media (max-width:768px){.cc-hero{aspect-ratio:350/200;margin-bottom:24px}}
@media (max-width:480px){
  .cc-ideas{grid-template-columns:repeat(2,1fr)}
  .cc-why-list{grid-template-columns:repeat(2,1fr);gap:16px}
  .cc-row{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.cc-page *{transition:none!important}}

/* ============================================================
   APPEND TO customised-cakes.css
   SEO COPY + FAQ ACCORDION for /customised-cakes
   Mirrors the .seo-block / details.faq look used on category.php
   (birthday-cakes etc.), rebuilt with the cc- prefix so it can't
   clash with common.css, index1.css or category.css.
   Uses the same --cc-* tokens already defined on .cc-page.
   ============================================================ */

.cc-seo{padding:10px var(--gutter) 60px}
.cc-seo h2{font-family: var(--font-secondary);font-style:normal;font-size:34px;line-height:1.25;margin-bottom:16px}
.cc-seo h3{font-family: var(--font-secondary);font-style:normal;font-size:22px;line-height:1.3;margin:28px 0 10px;}
.cc-seo p{margin:0 0 16px;line-height:1.65;color:var(--cc-ink);font-size:15px}
.cc-seo p strong{color:var(--cc-navy)}

.cc-seo ul,.cc-seo ol{margin:0 0 16px;padding-left:22px}
.cc-seo ul{list-style:disc}
.cc-seo ol{list-style:decimal}
.cc-seo li{margin:0 0 8px;line-height:1.6;font-size:15px}
.cc-seo li strong{color:var(--cc-navy)}

/* ---- FAQ accordion, same <details class="cc-faq"> markup pattern
   as category.php's <details class="faq"> ---- */
.cc-faqs{margin:0 0 16px;border-top:1px solid var(--cc-line)}
.cc-faq{border-bottom:1px solid var(--cc-line)}
.cc-faq>summary{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 0;cursor:pointer;list-style:none;
  font-weight:600;line-height:1.4;color:var(--cc-navy);font-size:15px;
}
.cc-faq>summary::-webkit-details-marker{display:none}
.cc-faq>summary::marker{content:''}
.cc-faq .ico{flex:0 0 auto;color:var(--cc-navy)}
.cc-faq .bar-v{transition:opacity .2s ease}
.cc-faq[open] .bar-v{opacity:0}
.cc-faq .cc-faq-body{padding:0 0 16px}
.cc-faq .cc-faq-body p{margin:0;line-height:1.6;font-size:14.5px}

.cc-seo-title{
  font-style:normal;
  display:inline-block;margin:24px 0 14px;padding:8px 16px;
  background:#FFF1E3;color:var(--cc-rust);
  border-left:4px solid var(--cc-rust);border-radius:6px;
  font-size:16px;
}
.cc-faq .cc-faq-num{color:var(--cc-rust);margin-right:4px}
.cc-faq .cc-faq-ans{color:var(--cc-rust);font-weight:700}

/* ---- mobile ---- */
@media (max-width:860px){
  .cc-seo{padding:10px 16px 40px}
  .cc-seo h2{font-size:26px}
  .cc-seo h3{font-size:19px}
}
@media (max-width:480px){
  .cc-faq>summary{font-size:14px;gap:10px}
  .cc-faq .cc-faq-body p{font-size:14px}
}