/* Penwell Frontend CSS v0.4 */

/* ── Product specs block ─────────────────────────────────────────────────── */
.penwell-specs-block {
    margin: 0 0 1.5em 0;
    border-top: 1px solid #e8e8e8;
    border-bottom: 1px solid #e8e8e8;
    padding: 0 0 1em 0;
}
.penwell-specs-table { width:100%; border-collapse:collapse; font-size:14px; }
.penwell-spec-row    { border-bottom:1px solid #f3f3f3; }
.penwell-spec-row:last-child { border-bottom:none; }
.penwell-spec-label  { width:38%; padding:7px 12px 7px 0; font-weight:600; color:#555; vertical-align:top; font-size:13px; text-transform:uppercase; letter-spacing:.3px; }
.penwell-spec-value  { padding:7px 0; color:#1d2327; font-size:14px; }

/* ── Description wrapper ─────────────────────────────────────────────────── */
.pw-desc { font-size:15px; line-height:1.75; color:inherit; }
.pw-desc p { margin:0 0 1em; }
.pw-desc p:last-child { margin-bottom:0; }
.pw-desc strong { font-weight:600; }

/* ── FAQ accordion ───────────────────────────────────────────────────────── */
.penwell-faq-section { margin:2em 0; }
.penwell-faq-heading { font-size:1.3em; font-weight:700; margin-bottom:.75em; }
.penwell-faq-list { border:1px solid #e8e8e8; border-radius:8px; overflow:hidden; }
.penwell-faq-item { border-bottom:1px solid #e8e8e8; }
.penwell-faq-item:last-child { border-bottom:none; }
.penwell-faq-question {
    width:100%; background:none; border:none; padding:14px 18px;
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    text-align:left; font-size:14px; font-weight:600; cursor:pointer;
    transition:background .15s;
    color:inherit;
}
.penwell-faq-question:hover { background:#f9f9f9; color:inherit; }
.pw-faq-icon { font-size:18px; color:#8c8f94; flex-shrink:0; transition:transform .2s; }
.penwell-faq-question[aria-expanded="true"] .pw-faq-icon { transform:rotate(45deg); }
.penwell-faq-answer { padding:0 18px 14px; font-size:14px; line-height:1.65; color:#3c434a; }
.penwell-faq-answer p { margin:0; }

@media(max-width:600px) {
    /* Specs stay side by side on mobile — label left, value right */
    .penwell-spec-label { width:45%; font-size:12px; }
    .penwell-spec-value { width:55%; font-size:12px; }
    .pw-desc { font-size:14px; }
}

/* ── FAQ button text colour fix — high specificity override ─────────────── */
/* Themes often set button { color: white } — we need !important to beat that */
.penwell-faq-section .penwell-faq-question,
.penwell-faq-section .penwell-faq-question:hover,
.penwell-faq-section .penwell-faq-question:focus,
.penwell-faq-section .penwell-faq-question:active {
    color: inherit !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-text-fill-color: inherit !important;
}

/* ── Product specs block ─────────────────────────────────────────────────── */
.penwell-specs-block{margin:0 0 1.5em 0;border-top:1px solid #e8e8e8;border-bottom:1px solid #e8e8e8;padding:0 0 1em 0;}
.penwell-specs-table{width:100%;border-collapse:collapse;font-size:14px;}
.penwell-spec-row{border-bottom:1px solid #f3f3f3;}
.penwell-spec-row:last-child{border-bottom:none;}
.penwell-spec-label{width:38%;padding:7px 12px 7px 0;font-weight:600;color:#555;vertical-align:top;font-size:13px;text-transform:uppercase;letter-spacing:.3px;}
.penwell-spec-value{padding:7px 0;color:#1d2327;font-size:14px;}
@media(max-width:600px){.penwell-spec-label{width:45%;font-size:12px;}.penwell-spec-value{width:55%;font-size:12px;}}

/* ── Category description collapse ───────────────────────────────────────── */
.pw-cat-desc {
    transition: max-height 0.3s ease;
}
.pw-cat-desc--collapsed {
    -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
}
.pw-cat-desc--expanded {
    -webkit-mask-image: none;
    mask-image: none;
}
.pw-cat-toggle-wrap {
    display: block;
    width: 100%;
    text-align: center;
    margin: 8px 0 4px;
    clear: both;
}
.pw-cat-toggle,
.pw-cat-toggle:link,
.pw-cat-toggle:visited {
    display: inline-block !important;
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    border-bottom: 1px dotted #bbb !important;
    box-shadow: none !important;
    padding: 2px 0 !important;
    cursor: pointer !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #aaa !important;
    letter-spacing: .3px !important;
    text-decoration: none !important;
    transition: color .15s, border-color .15s !important;
    line-height: 1.5 !important;
    text-transform: none !important;
}
.pw-cat-toggle:hover,
.pw-cat-toggle:focus {
    color: #666 !important;
    border-bottom-color: #888 !important;
    text-decoration: none !important;
    background: none !important;
}

/* ── Nose / Palate / Finish label colour ─────────────────────────────────── */
/* Targets bold text that opens a paragraph — Nose:, Palate:, Finish: only   */
.woocommerce-Tabs-panel--description p > strong:first-child,
.penwell-description p > strong:first-child {
    color: #c6102e;
}

/* ── Category description content styling ────────────────────────────────── */
/* Targets .term-description — WooCommerce standard class for category pages  */

/* Links — brand colour */
.term-description a,
.term-description a:link,
.term-description a:visited {
    color: #c6102e !important;
    text-decoration: underline !important;
    text-decoration-style: dotted !important;
    text-underline-offset: 2px;
}
.term-description a:hover {
    color: #a0000c !important;
    text-decoration-style: solid !important;
}

/* H2 subheadings — Buying Guide, FAQ */
.term-description h2 {
    font-size: 1.05em;
    font-weight: 700;
    margin: 1.2em 0 0.5em;
    padding-bottom: 4px;
    border-bottom: 1px solid #e8e8e8;
    color: #2c2c2c;
}

/* H3 FAQ questions — bold + brand accent left border */
.term-description h3 {
    font-size: 0.95em;
    font-weight: 600;
    margin: 1em 0 0.25em;
    padding-left: 10px;
    border-left: 3px solid #c6102e;
    color: #2c2c2c;
}

/* FAQ answers — tight spacing under question */
.term-description h3 + p {
    margin-top: 0.2em;
    margin-bottom: 0.8em;
    padding-left: 10px;
    color: #555;
    font-size: 0.92em;
}