/* RetailHobby shopping-first homepage. Only homepage-specific CSS.
   Existing product page styles remain untouched. */
:root {
  --shop-green: #104e3c;
  --shop-dark: #172d25;
  --shop-gold: #bb8e2f;
  --shop-cream: #faf7ef;
  --shop-muted: #64766c;
  --shop-line: #dfe8e1;
}
html { scroll-behavior: smooth; }
.shop-kicker { font-size: 11px; font-weight: 800; letter-spacing: .16em; color: #1f7659; margin: 0 0 12px; }
.shop-hero { background: linear-gradient(125deg,#fbf8f0 0%,#f2f6f0 100%); padding: 45px 0 48px; }
.shop-hero-grid { display: grid; grid-template-columns: 1.06fr .94fr; gap: 48px; align-items: center; }
.shop-hero-copy h1 { font-size: clamp(45px,5.5vw,75px); line-height: 1.01; letter-spacing: -.065em; margin: 0 0 20px; color: var(--shop-dark); }
.shop-hero-copy h1 em { color: #1b7658; font-style: normal; }
.shop-hero-lead { font-size: clamp(16px,1.5vw,19px); color: #51645b; line-height: 1.7; max-width: 600px; margin: 0; }
.shop-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 26px 0 0; }
.shop-btn { border-radius: 11px; display: inline-flex; justify-content: center; align-items: center; gap: 10px; min-height: 49px; padding: 13px 19px; font: 800 13px/1.3 'DM Sans',Arial,sans-serif; text-decoration: none; text-align: center; transition: transform .15s, background .15s; }
.shop-btn:hover { transform: translateY(-2px); }
.shop-btn-primary { background: var(--shop-green); color: #fff; }
.shop-btn-primary:hover { background: #1b684f; }
.shop-btn-outline { background: #fff; color: var(--shop-green); border: 1px solid #cddcd3; }
.shop-btn-light { background: white; color: var(--shop-green); }
.shop-fine { margin: 18px 0 0; font-size: 12px; color: #7a8a81; }
.shop-hero-feature { border: 1px solid #dfe8dd; border-radius: 24px; padding: 22px 25px 10px; background: #fff; box-shadow: 0 22px 55px rgba(16,54,37,.09); }
.shop-feature-label { font-size: 10px; font-weight: 800; letter-spacing: .13em; color: #2e6f55; display: flex; justify-content: space-between; gap: 14px; }
.shop-feature-label span { color: #8c9b8f; }
.shop-feature-body { display: grid; grid-template-columns: .48fr .52fr; min-height: 320px; align-items: center; gap: 12px; }
.shop-feature-body img { display: block; width: 100%; height: 298px; object-fit: contain; }
.shop-feature-copy h2 { font-size: clamp(21px,2.3vw,32px); margin: 0 0 12px; letter-spacing: -.045em; }
.shop-feature-copy p { font-size: 14px; line-height: 1.65; color: var(--shop-muted); }
.shop-feature-copy a { display: inline-block; margin-top: 11px; color: var(--shop-green); font-size: 14px; font-weight: 800; text-decoration: none; }
.shop-feature-copy a:hover { text-decoration: underline; }
.shop-section { padding: 67px 0 73px; }
.shop-featured { background: #fff; }
.shop-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 28px; }
.shop-section-heading h2 { font-size: clamp(28px,3.2vw,42px); letter-spacing: -.045em; color: var(--shop-dark); margin: 0; }
.shop-section-heading > p { max-width: 365px; line-height: 1.7; font-size: 14px; color: var(--shop-muted); margin: 0; }
.shop-product-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 19px; }
.shop-product-card { border: 1px solid var(--shop-line); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; background: white; }
.shop-product-visual { background: #f5f8f5; height: 235px; padding: 12px; display: flex; justify-content: center; align-items: center; }
.shop-product-visual img { max-width: 100%; width: 100%; height: 100%; object-fit: contain; }
.shop-product-info { display: flex; flex-direction: column; flex: 1; padding: 23px; }
.shop-card-kicker { font-size: 10px; letter-spacing: .12em; font-weight: 800; color: #237359; }
.shop-product-info h3,.shop-more-card h3 { font-size: 21px; line-height: 1.22; margin: 12px 0 9px; letter-spacing: -.025em; }
.shop-product-info h3 a { text-decoration: none; }
.shop-product-info p,.shop-more-card p { line-height: 1.65; color: var(--shop-muted); font-size: 14px; }
.shop-card-link { font-size: 13px; font-weight: 800; color: var(--shop-green); text-decoration: none; margin-top: auto; padding-top: 12px; }
.shop-card-link:hover { text-decoration: underline; }
.shop-more-card { padding: 29px; background: linear-gradient(165deg,#f1f7f1,#fbf8ef); }
.shop-more-card h3 { font-size: 30px; margin: 16px 0 10px; }
.shop-more-tags { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 18px; }
.shop-more-tags span { font-size: 11px; padding: 6px 9px; border: 1px solid #d8e5d8; background: white; border-radius: 999px; color: #3f6251; }
.shop-destinations { background: #f5f8f4; border-top: 1px solid var(--shop-line); }
.shop-destination-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.shop-destination { padding: 32px; border-radius: 21px; display: flex; flex-direction: column; align-items: flex-start; min-height: 325px; }
.shop-destination-primary { background: linear-gradient(135deg,#12543f,#0f3f34); color: white; }
.shop-destination-secondary { background: white; border: 1px solid #dae5dc; }
.shop-destination-top { font-size: 11px; letter-spacing: .13em; font-weight: 800; width: 100%; display: flex; justify-content: space-between; }
.shop-destination-primary .shop-destination-top { color: #c4d9cb; }
.shop-destination-secondary .shop-destination-top { color: #387358; }
.shop-destination-arrow { font-size: 22px; letter-spacing: 0; }
.shop-destination h3 { margin: 18px 0 3px; font-size: 38px; letter-spacing: -.05em; }
.shop-destination-tagline { font-family: Georgia,serif; font-style: italic; font-size: 21px; }
.shop-destination-primary .shop-destination-tagline { color: #e8d4a1; }
.shop-destination-secondary .shop-destination-tagline { color: #3d7058; }
.shop-destination > p:not(.shop-destination-tagline) { line-height: 1.7; font-size: 14px; max-width: 470px; margin-bottom: 26px; }
.shop-destination-primary > p:not(.shop-destination-tagline) { color: #d7e7dd; }
.shop-destination-secondary > p:not(.shop-destination-tagline) { color: var(--shop-muted); }
.shop-destination .shop-btn { margin-top: auto; }
.shop-brand-section { padding: 70px 0 85px; background: #fff; }
.shop-brand-heading { max-width: 780px; margin-bottom: 24px; }
.shop-brand-heading h2 { margin: 0 0 9px; font-size: clamp(29px,3vw,43px); }
.shop-brand-heading > p { color: var(--shop-muted); font-size: 15px; }
.shop-banner-link { display: block; border-radius: 20px; overflow: hidden; background: #f7f2e3; box-shadow: 0 15px 40px rgba(20,49,30,.08); }
.shop-banner-link img { width: 100%; height: auto; display: block; }
.shop-footer-disclosure { margin: 20px 0 0; font-size: 12px; }
@media(max-width:920px) { .shop-hero-grid { gap: 20px; } .shop-feature-body { min-height: 280px; } .shop-feature-body img { height: 255px; } .shop-product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .shop-more-card { grid-column: 1/-1; } }
@media(max-width:740px) { .shop-hero { padding: 36px 0; } .shop-hero-grid,.shop-destination-grid { grid-template-columns: 1fr; } .shop-hero-feature { max-width: 590px; } .shop-section-heading { display: block; } .shop-section-heading > p { margin-top: 13px; max-width: none; } .shop-section { padding: 48px 0; } }
@media(max-width:520px) { .shop-hero-copy h1 { font-size: 43px; } .shop-hero-actions .shop-btn { width: 100%; } .shop-product-grid { grid-template-columns: 1fr; } .shop-more-card { grid-column: auto; } .shop-destination { padding: 24px; } .shop-feature-body img { height: 245px; } .shop-feature-body { min-height: 260px; } .shop-feature-copy h2 { font-size: 22px; } }


/* Rotating feature: preserves the approved product showcase footprint. */
.shop-rotation { overflow: hidden; }
.shop-rotation-track { position: relative; min-height: 320px; }
.shop-rotation-slide { display: none; grid-template-columns: .48fr .52fr; min-height: 320px; align-items: center; gap: 12px; }
.shop-rotation-slide.is-current { display: grid; animation: productReveal .38s ease-out; }
.shop-rotation-photo { display: flex; justify-content: center; align-items: center; min-width: 0; }
.shop-rotation-photo img { width: 100%; height: 298px; object-fit: contain; display: block; }
.shop-rotation-controls { display: flex; align-items: center; gap: 16px; justify-content: space-between; border-top: 1px solid #e5eae5; padding: 10px 0 2px; }
.shop-rotation-arrows { display: flex; gap: 8px; }
.shop-rotation-arrow { width: 33px; height: 33px; border: 1px solid #dce7df; border-radius: 50%; background: white; color: #124c3b; font-size: 24px; cursor: pointer; line-height: 1; }
.shop-rotation-dots { display: flex; gap: 10px; align-items: center; }
.shop-rotation-dot { width: 11px; height: 11px; padding: 0; border-radius: 50%; border: 1px solid #9eafa5; background: white; cursor: pointer; }
.shop-rotation-dot.is-current { background: #175b45; border-color: #175b45; }
.shop-rotation-pause { border: none; background: transparent; font: 700 12px 'DM Sans',Arial,sans-serif; color: #315f4c; cursor: pointer; padding: 9px 3px; }
.shop-rotation button:focus-visible, .shop-rotation a:focus-visible { outline: 3px solid #cb9e39; outline-offset: 3px; }
@keyframes productReveal { from {opacity: .4;} to {opacity: 1;} }
@media (prefers-reduced-motion: reduce) { .shop-rotation-slide.is-current { animation: none; } }
@media(max-width:920px) { .shop-rotation-track,.shop-rotation-slide { min-height: 280px; } .shop-rotation-photo img { height: 255px; } }
@media(max-width:520px) { .shop-rotation-track,.shop-rotation-slide { min-height: 260px; } .shop-rotation-photo img { height: 245px; } .shop-rotation-slide .shop-feature-copy h2 { font-size: 20px; } .shop-rotation-slide .shop-feature-copy p { font-size: 12px; } }