/*
Theme Name: A Bard in the Hand (Hello Elementor Child)
Theme URI: https://abardinthehand.com
Description: Hello Elementor child theme carrying the A Bard in the Hand brand design — custom header, homepage, and footer, built to work with Elementor (free) and WooCommerce (default shop/product/cart/checkout templates).
Author: iSmart Infosoft
Template: hello-elementor
Version: 1.0
Text Domain: bard-in-hand
*/

:root{
    --cream: #F3EDE0;
    --cream-2: #ECE4D2;
    --ink: #221C13;
    --green: #1D3A2A;
    --green-deep: #142A1E;
    --red: #B23A2C;
    --brass: #9C7A3E;
    --line: rgba(34,28,19,0.14);
    --cream-line: rgba(243,237,224,0.22);
    --serif: 'Fraunces', serif;
    --sans: 'Inter', sans-serif;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background: var(--cream);
    color: var(--ink);
    font-family: var(--sans);
    -webkit-font-smoothing: antialiased;
    overflow-x:hidden;
  }
  img{max-width:100%; display:block;}
  a{color:inherit; text-decoration:none;}

  .wrap{max-width:1180px; margin:0 auto; padding:0 32px;}

  /* -------- heart glyph (signature element) -------- */
  .heart-glyph{
    width: 22px; height:20px; flex-shrink:0;
  }
  .heart-glyph path{
    fill:none; stroke:currentColor; stroke-width:1.4;
  }
  .divider{
    display:flex; align-items:center; justify-content:center; gap:14px;
    color: var(--brass);
    margin: 0 auto 28px;
  }
  .divider .rule{ width:52px; height:1px; background: currentColor; opacity:.5;}

  /* -------- nav -------- */
  header{
    position:sticky; top:0; z-index:50;
    background: rgba(243,237,224,0.92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
  }
  nav.wrap{
    display:flex; align-items:center; justify-content:space-between;
    height:78px;
  }
  .brand{
    font-family: var(--serif); font-weight:600; font-size:19px; letter-spacing:.03em;
    display:flex; align-items:center; gap:10px; color:var(--green);
  }
  .brand .heart-glyph{color:var(--red);}
  .brand .brand-mark{ height:58px; width:auto; flex-shrink:0; }
  .foot-brand .brand-mark{ height:36px; }
  .voice-mark{
    display:block; margin:0 auto 28px; height:260px; width:auto; opacity:1;
  }
  .nav-links{display:flex; gap:34px; font-size:14px; font-weight:500; letter-spacing:.02em;}
  .nav-links a{
    color: var(--ink); opacity:.75; padding:6px 14px; border-radius:100px; margin:-6px -14px;
    transition: opacity .2s ease, background-color .2s ease, color .2s ease;
  }
  .nav-links a:hover{ opacity:1; background-color:var(--red); color:#FFFFFF; }
  .nav-cta{
    font-size:13px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
    background:var(--green); color:var(--cream); padding:11px 20px; border-radius:100px;
    transition: background .2s ease, transform .2s ease;
  }
  .nav-cta:hover{background:var(--green-deep); color:var(--cream); transform:translateY(-1px);}
  .nav-mobile-hide{display:flex; align-items:center; gap:34px;}

  /* -------- buttons -------- */
  .btn{
    display:inline-flex; align-items:center; gap:10px;
    font-size:14px; font-weight:600; letter-spacing:.03em; text-transform:uppercase;
    padding:15px 26px; border-radius:100px; border:1px solid transparent;
    cursor:pointer; transition: all .25s ease;
  }
  .btn-primary{ background:var(--red); color:var(--cream); }
  .btn-primary:hover{ background:#96301F; color:var(--cream); transform:translateY(-1px); box-shadow:0 10px 24px rgba(178,58,44,.28);}
  .btn-primary .heart-glyph{color:var(--cream); width:16px; height:15px; transition:transform .25s ease;}
  .btn-primary:hover .heart-glyph{transform:scale(1.15);}
  .btn-outline{ border-color: var(--ink); color:var(--ink); }
  .btn-outline:hover{ background:var(--ink); color:var(--cream); }
  .btn-outline-cream{ border-color: rgba(243,237,224,.55); color:var(--cream);}
  .btn-outline-cream:hover{ background:var(--cream); color:var(--green-deep);}
  .btn-row{display:flex; gap:16px; flex-wrap:wrap;}

  /* -------- hero -------- */
  .hero{
    padding: 88px 0 110px;
    position:relative;
  }
  .hero .wrap{
    display:grid; grid-template-columns: 1fr 0.92fr; gap:64px; align-items:center;
  }
  .eyebrow{
    font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
    color: var(--brass); margin-bottom:22px; display:flex; align-items:center; gap:10px;
  }
  .eyebrow .dot{width:6px; height:6px; border-radius:50%; background:var(--red);}
  h1{
    font-family: var(--serif);
    font-weight:500;
    font-size: clamp(40px, 5vw, 64px);
    line-height:1.04;
    letter-spacing:-0.01em;
    color: var(--green-deep);
    margin-bottom:26px;
  }
  h1 em{ font-style:italic; font-weight:400; color:var(--red);}
  .lead{
    font-size:19px; line-height:1.7; color:rgba(34,28,19,.78);
    max-width:480px; margin-bottom:36px;
  }
  .hero-visual{
    position:relative;
    display:flex; align-items:center; justify-content:center;
  }
  .hero-visual .ring{
    position:absolute; border-radius:50%; border:1px solid var(--red); opacity:0;
    animation: pulse 3.2s ease-out infinite;
  }
  .hero-visual .ring.r1{ width:60%; height:60%; animation-delay:0s;}
  .hero-visual .ring.r2{ width:60%; height:60%; animation-delay:1.05s;}
  .hero-visual .ring.r3{ width:60%; height:60%; animation-delay:2.1s;}
  @keyframes pulse{
    0%{ transform:scale(.82); opacity:.55;}
    75%{ transform:scale(1.28); opacity:0;}
    100%{ opacity:0;}
  }
  .hero-img-frame{
    position:relative; width:100%; max-width:440px;
    filter: drop-shadow(0 40px 60px rgba(20,42,30,0.22));
  }
  @media (prefers-reduced-motion: reduce){
    .hero-visual .ring{animation:none; display:none;}
  }

  /* -------- scroll reveal -------- */
  .reveal{
    opacity:0; transform:translateY(24px);
    transition: opacity .6s ease, transform .6s ease;
    will-change: opacity, transform;
  }
  .reveal.is-visible{ opacity:1; transform:translateY(0); }
  @media (prefers-reduced-motion: reduce){
    .reveal{ opacity:1; transform:none; transition:none; }
  }

  /* -------- section basics -------- */
  section:not(.elementor-section){ padding: 96px 0; }
section:not(.elementor-section).hero{ padding-top: 48px; }
section:not(.elementor-section)#idea{ padding-top: 200px; }
  .section-head{ text-align:center; max-width:640px; margin:0 auto 56px; }
  .section-tag{
    font-size:12.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
    color:var(--brass); margin-bottom:16px;
  }
  h2{
    font-family: var(--serif); font-weight:500; font-size:clamp(30px,3.4vw,42px);
    line-height:1.1; letter-spacing:-.01em; color:var(--green-deep); margin-bottom:18px;
  }
  .section-body{ font-size:18px; line-height:1.75; color:rgba(34,28,19,.75); }
  .center-text{ text-align:center; }

  /* -------- idea -------- */
  .idea{ background: var(--cream-2); position:relative; overflow:hidden; }
  .idea::before{
    content:""; position:absolute; inset:0;
    background-image: url('https://salmon-badger-831067.hostingersite.com/wp-content/uploads/2026/08/Sketchier-version-of-hero-1.png');
    background-repeat:no-repeat; background-position:55% 50%; background-size:560px auto;
    opacity:.20; pointer-events:none;
  }
  .idea .wrap{ position:relative; z-index:1; }
  .idea .section-head{ margin-bottom:0; }
  #idea .section-head{ max-width:700px; }
#idea p{ text-shadow: 2px 2px 2px #f7f9d3; }

  /* -------- voice band -------- */
  .voice{
    background: var(--green-deep); color: var(--cream);
    position:relative; overflow:hidden;
  }
  .voice::before{
    content:""; position:absolute; inset:0;
    background: radial-gradient(600px 300px at 15% 20%, rgba(178,58,44,.16), transparent 60%);
    pointer-events:none;
  }
  .voice .wrap{ position:relative; }
  .voice .section-tag{ color:#C9A467; }
  .voice h2{ color:var(--cream); }
  .voice .section-body{ color:rgba(243,237,224,.78); max-width:600px; margin:0 auto; }
  .quote{
    font-family: var(--serif); font-style:italic; font-weight:400;
    font-size: clamp(26px,3vw,36px); text-align:center; color:var(--cream);
    max-width:640px; margin:52px auto 0; line-height:1.35;
    border-top:1px solid var(--cream-line); padding-top:44px;
  }
  .quote span{ display:block; font-family:var(--sans); font-style:normal; font-size:13px;
    letter-spacing:.12em; text-transform:uppercase; color:#C9A467; margin-top:18px;}

  /* -------- object -------- */
  .object .wrap{ display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center;}
  .object h2{ margin-bottom:20px; }
  .feature-list{ list-style:none; margin-top:30px; display:flex; flex-direction:column; gap:16px;}
  .feature-list li{
    display:flex; align-items:flex-start; gap:14px; font-size:16.5px; color:rgba(34,28,19,.82);
    padding-bottom:16px; border-bottom:1px solid var(--line);
  }
  .feature-list li:last-child{ border-bottom:none; }
  .feature-list .heart-glyph{ color:#FF0000 !important; margin-top:2px; }
.object-heart-icon{ width:20px; height:19px; flex-shrink:0; margin-top:2px; }
.collection-heading{ display:flex; align-items:center; justify-content:center; gap:24px; }.collection-heart{ width:44px; height:41px; flex-shrink:0; }@media (max-width: 640px){ .collection-heart{ width:28px; height:26px; } .collection-heading{ gap:14px; } }
  .object-visual{
    background: var(--cream-2); border-radius:24px; padding:36px;
    display:flex; align-items:center; justify-content:center;
  }
  .object-visual img{ border-radius:12px; }

  /* -------- collection -------- */
  .collection-grid{
    display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
    max-width:1180px; margin:32px auto 0; padding:0 32px;
  }
  .card{
    background: var(--cream-2); border:1px solid var(--line); border-radius:18px;
    padding:26px 20px; text-align:center;
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
  }
  .card:hover{ transform:translateY(-4px); border-color:var(--red); box-shadow:0 16px 30px rgba(34,28,19,.08);}
  .card .heart-glyph{ color:var(--red); margin:0 auto 14px; }
  .card h4{
    font-family:var(--serif); font-weight:500; font-style:italic; font-size:16.5px;
    color:var(--green-deep); line-height:1.3; margin-bottom:6px;
  }
  .card p{ font-size:12.5px; letter-spacing:.05em; text-transform:uppercase; color:rgba(34,28,19,.55);}
  .collection-foot{ max-width:1180px; margin:44px auto 0; padding:0 32px; text-align:center; box-sizing:border-box; }
  .collection-foot p{ font-size:15.5px; color:rgba(34,28,19,.65); margin-top:16px; margin-bottom:24px; font-style:italic; font-family:var(--serif); }

  .piece-tiles{
    display:grid; grid-template-columns:repeat(2,1fr); gap:12px;
    max-width:1180px; margin:32px auto 0; padding:0 32px;
  }
.elementor-element-38d4d947{ padding: 40px 0; }
.elementor-element-eb101cf{ padding: 40px 0; }
.elementor-element-d62b7aa{ background-color:#4BD88A !important; }
.elementor-element-gft1html{ display:none !important; }
.elementor-element-f599429{ background-color:#34C073 !important; }
@media (max-width: 900px) {  .gifting-copy{ text-align:center !important; margin-left:auto !important; margin-right:auto !important; }  .gifting-divider{ justify-content:center !important; }}
  .piece-tile{
    display:flex; flex-direction:column; align-items:stretch; gap:8px;
    background: var(--cream-2); border:1px solid var(--line); border-radius:14px;
    padding:14px 18px; transition: border-color .2s ease, box-shadow .2s ease;
  }
  .piece-tile:hover{ border-color:var(--red); box-shadow:0 10px 22px rgba(34,28,19,.08); }
  .piece-tile[data-audio]{ cursor:pointer; }
  .piece-tile-head{ display:flex; align-items:center; gap:14px; }
  .piece-play{
    flex-shrink:0; width:38px; height:38px; border-radius:50%; border:none;
    background:var(--red); display:flex; align-items:center; justify-content:center;
    cursor:pointer; transition: transform .2s ease, background .2s ease; padding:0;
    pointer-events:none;
  }
  .piece-play svg{ width:13px; height:13px; fill:var(--cream); }
  .piece-play .icon-pause{ display:none; }
  .piece-tile.playing .piece-play .icon-play{ display:none; }
  .piece-tile.playing .piece-play .icon-pause{ display:block; }
  .piece-tile.playing .piece-play{ background:var(--green-deep); }
  .piece-tile[data-audio]:hover .piece-play{ transform:scale(1.08); }
  .piece-play--soon{ opacity:.4; cursor:not-allowed; }
  
  .piece-label{
    font-family:var(--serif); font-size:16px; font-style:italic; color:var(--ink);
    line-height:1.4;
  }
  .piece-tile[data-audio]:hover .piece-label{ color:var(--red); }
  .piece-view{
    flex-shrink:0; margin-left:auto; width:28px; height:28px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    color:var(--ink); opacity:.35; transition:opacity .2s ease, background .2s ease;
  }
  .piece-view svg{ width:16px; height:16px; }
  .piece-tile:hover .piece-view{ opacity:.7; }
  .piece-view:hover{ opacity:1; background:rgba(34,28,19,.06); }
  .piece-desc{
    font-size:14px; line-height:1.6; color:rgba(34,28,19,.68);
    margin:0; padding-left:52px;
  }

  /* -------- single product "back to home" link (bard_single_product_back_home_link) -------- */
  .bard-back-home{
    display:inline-block; font-size:13px; font-weight:600; letter-spacing:.02em;
    color:var(--brass); text-decoration:none; margin-bottom:12px;
    transition:color .2s ease;
  }
  .bard-back-home:hover{ color:var(--red); }

  /* -------- single product audio preview (bard_single_product_audio_tile) -------- */
  .bard-product-audio{ max-width:420px; margin:38px 0 36px; }
  .bard-product-audio .section-tag{ margin-bottom:10px; }
  .bard-product-audio .piece-tile{ padding:12px 16px; }
  .bard-product-audio .piece-label{ text-transform:none; }

  /* -------- gifting -------- */
  .gifting{ background: var(--green); color:var(--cream); }
  .gifting .wrap{
    display:grid; grid-template-columns:1.1fr 0.9fr; gap:60px; align-items:center;
  }
  .gifting .section-tag{ color:#C9A467; }
  .gifting h2{ color:var(--cream); text-align:left; }
  .gifting p{ color:rgba(243,237,224,.8); font-size:18px; line-height:1.75; margin-bottom:32px; max-width:480px;}
  .gift-logo{ display:flex; align-items:center; justify-content:center; }
  .gift-logo img{ width:100%; max-width:320px; height:auto; opacity:.92; }

  /* -------- faq -------- */
  .faq-list{ max-width:760px; margin:0 auto; }
  details{
    border-bottom:1px solid var(--line); padding:24px 0;
  }
  details summary{
    cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center;
    font-family:var(--serif); font-size:19px; font-weight:500; color:var(--green-deep);
    gap:20px;
  }
  details summary::-webkit-details-marker{ display:none; }
  details summary .plus{
    font-size:22px; color:var(--red); flex-shrink:0; transition:transform .25s ease; font-weight:300;
  }
  details[open] summary .plus{ transform:rotate(45deg); }
  details p{
    margin-top:16px; font-size:16.5px; line-height:1.7; color:rgba(34,28,19,.72); max-width:640px;
  }

  /* -------- closing -------- */
  .closing{
    background: var(--green-deep); color:var(--cream); text-align:center; position:relative; overflow:hidden;
  }
  .closing::before{
    content:""; position:absolute; inset:0;
    background: radial-gradient(700px 340px at 50% 0%, rgba(178,58,44,.18), transparent 65%);
  }
  .closing .wrap{ position:relative; }
  .closing h2{ color:var(--cream); font-size:clamp(32px,4.4vw,52px); }
  .closing .tagline{ font-family:var(--serif); font-style:italic; color:#C9A467; margin-top:26px; font-size:16px; }
  .closing .btn-row{ justify-content:center; margin-top:34px; }

  /* -------- footer -------- */
  footer{ background:var(--cream); padding:56px 0 40px; border-top:1px solid var(--line); }
  footer .wrap{ display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:24px; }
  .foot-left{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
  .foot-brand{ font-family:var(--serif); font-size:18px; color:var(--green-deep); display:flex; align-items:center; gap:10px; }
  .foot-brand .heart-glyph{ color:var(--red); }
  .foot-privacy-link{ font-size:13px; color:rgba(34,28,19,.55); letter-spacing:.02em; text-decoration:none; transition:color .2s ease; }
  .foot-privacy-link:hover{ color:var(--green-deep); }
  .foot-meta{ font-size:13px; color:rgba(34,28,19,.55); letter-spacing:.02em; text-align:right; line-height:1.8;}

  /* -------- inside-page titles (Cart, My Account, Privacy Policy, etc.) -------- */
  .entry-title{
    font-size:clamp(28px, 3.2vw, 40px);
  }

  /* -------- WooCommerce shop/archive pages -------- */
  body.woocommerce-page .woocommerce-breadcrumb{
    margin-top:24px;
  }
  .woocommerce-products-header__title.page-title{
    font-size:clamp(28px, 3.2vw, 40px);
  }
  body.woocommerce-page a.button.add_to_cart_button,
  body.woocommerce-page a.button.added_to_cart,
  .woocommerce div.product form.cart .single_add_to_cart_button{
    background-color:var(--green);
    color:#FFFFFF;
    font-size:12px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.02em;
    border-radius:50px;
    padding:12px 24px;
    border:none;
    transition: background .2s ease, transform .2s ease;
  }
  body.woocommerce-page a.button.add_to_cart_button:hover,
  body.woocommerce-page a.button.added_to_cart:hover,
  .woocommerce div.product form.cart .single_add_to_cart_button:hover{
    background-color:var(--green-deep);
    color:#FFFFFF;
    transform:translateY(-1px);
  }

  @media (max-width: 900px){
    .hero .wrap{ grid-template-columns:1fr; }
    .hero{ padding:64px 0 72px; text-align:center; }
    .eyebrow{ justify-content:center; }
    .lead{ margin-left:auto; margin-right:auto; }
    .btn-row{ justify-content:center; }
    .hero-visual{ order:-1; margin-bottom:16px; }
    .object .wrap{ grid-template-columns:1fr; gap:36px; }
    .object{ text-align:left; }
    .collection-grid{ grid-template-columns:repeat(2,1fr); }
    .piece-tiles{ grid-template-columns:1fr; }
    .gifting .wrap{ grid-template-columns:1fr; }
    .gifting h2{ text-align:center; }
    .gifting p{ margin-left:auto; margin-right:auto; text-align:center; }
    .nav-links{ display:none; }
    footer .wrap{ flex-direction:column; }
    .foot-meta{ text-align:left; }
  }