/* ==========================================================================
   DruckShirt24 – Smartphone-Optimierung
   Wird nach main.css & woocommerce.css geladen.
   ========================================================================== */

html,body{overflow-x:clip}
@supports not (overflow:clip){html,body{overflow-x:hidden}}

/* Topbar: auf dem Handy rotierende Einzeiler statt zwei Zeilen -------- */
.topbar__inner{display:flex;justify-content:center;flex-wrap:wrap;gap:4px 18px}
.topbar__item+.topbar__item::before{content:"·";margin-right:18px;color:var(--ds-green)}
.drawer-extras{display:none}

@media (max-width:980px){
	/* Topbar */
	.topbar{height:30px;padding:0;overflow:hidden}
	.topbar__inner{position:relative;height:30px;display:block}
	.topbar__item{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s;white-space:nowrap}
	.topbar__item.is-active{opacity:1;transform:none}
	.topbar__item+.topbar__item::before{display:none}

	/* Header */
	.site-header__inner{min-height:62px}
	.site-branding{flex:1;display:flex;justify-content:center}
	.site-branding img,.custom-logo{height:38px;max-width:62vw;object-fit:contain}
	.header-actions{margin-left:0;gap:2px}

	/* Menü-Drawer */
	.primary-nav{inset:0 auto 0 0;width:min(86vw,360px);max-width:none;padding:84px 22px 28px;display:flex;flex-direction:column}
	.primary-nav .menu>li{border-bottom:1px solid rgba(255,255,255,.08)}
	.primary-nav a{font-size:1.55rem;padding:13px 0}
	.drawer-extras{display:block;margin-top:auto;padding-top:24px}
	.drawer-search{margin-bottom:16px}
	.drawer-search .search-field{background:var(--ds-dark-2);border-color:var(--ds-dark-2);color:var(--ds-white)}
	.drawer-search .search-field::placeholder{color:rgba(255,255,255,.5)}
	.drawer-link{display:flex!important;align-items:center;gap:12px;font-family:var(--ds-font-body)!important;font-style:normal!important;text-transform:none!important;font-size:1rem!important;font-weight:600!important;color:rgba(255,255,255,.85)!important;padding:10px 0!important}
	.drawer-link::after{display:none}
	.drawer-link .ds-icon{color:var(--ds-green)}
	.nav-toggle{width:44px;height:44px;align-items:center;justify-content:center;padding:0}
}

@media (max-width:760px){
	body{font-size:15px}
	.container{padding:0 16px}
	.section{padding:44px 0}
	.section__head{margin-bottom:20px;align-items:center}
	.section__title{font-size:2rem}

	/* Hero kompakter: Text zuerst, Bild klein daneben */
	.hero{padding:34px 0 38px}
	.hero__inner{gap:22px}
	.hero__visual{order:0}
	.hero__visual img{max-width:240px}
	.hero__visual:has(.hero__placeholder){display:none}
	.kicker{font-size:.85rem;margin-bottom:14px;padding:5px 10px}
	.hero__title{font-size:clamp(2.7rem,13vw,3.6rem);margin-bottom:14px}
	.hero__text{font-size:1rem;margin-bottom:22px}
	.hero__actions{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:24px}
	.hero__actions .btn{width:100%;font-size:1.2rem;padding:15px 18px}
	.hero__steps{gap:10px 16px;font-size:.82rem}
	.hero__steps span{width:26px;height:26px}
	.hero__swoosh{width:170%;right:-95%;top:-4%;opacity:.55}

	/* Vorteile: wischbare Leiste statt 4 Zeilen */
	.usp-bar{padding:14px 0}
	.usp-bar__grid{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:2px 16px;scroll-padding:0 16px}
	.usp-bar__grid::-webkit-scrollbar{display:none}
	.usp{flex:0 0 78%;scroll-snap-align:start;background:var(--ds-light);border-radius:12px;padding:12px}
	.usp__icon{width:42px;height:42px;border-radius:10px}
	.usp__title{font-size:1.05rem}
	.usp__text{font-size:.78rem}

	/* Kategorien: wischbar */
	.cat-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:0 -16px;padding:0 16px 6px;scrollbar-width:none}
	.cat-grid::-webkit-scrollbar{display:none}
	.cat-card{flex:0 0 44%;scroll-snap-align:start}
	.cat-card__name{font-size:1rem;padding:8px 10px;left:8px;right:8px;bottom:8px}

	.how__grid{gap:12px;margin-top:20px}
	.how__step{padding:20px;display:grid;grid-template-columns:auto 1fr;gap:0 16px;align-items:start}
	.how__num{font-size:2.6rem;grid-row:span 2;margin:0}
	.how__step h3{font-size:1.3rem}

	.cta-band{padding:36px 0}
	.cta-band .btn{width:100%}

	/* Footer: Menüs zweispaltig */
	.site-footer__grid{grid-template-columns:1fr 1fr;gap:28px 20px;padding-top:40px}
	.footer-brand,.site-footer__grid>.footer-col:last-child{grid-column:1/-1}
	.footer-brand img{max-width:240px}
	.site-footer li a{display:inline-block;padding:4px 0}
	.site-footer__bottom .container{flex-direction:column;gap:10px;text-align:center;align-items:center}
	.legal-inline{justify-content:center;gap:6px 16px}

	.page-hero{padding:26px 0 24px}
	.page-hero__title{font-size:2.2rem}

	/* Formulare: 16px verhindert Auto-Zoom auf dem iPhone */
	input,select,textarea{font-size:16px!important}
	.btn,.button{min-height:46px}
}

/* ==========================================================================
   WooCommerce mobil
   ========================================================================== */
@media (max-width:760px){
	.woocommerce-breadcrumb{margin:14px 0 12px!important;font-size:.7rem!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

	/* Shop-Toolbar */
	.shop-toolbar{display:grid;grid-template-columns:auto 1fr;gap:10px;margin-bottom:16px}
	.shop-toolbar .woocommerce-result-count{grid-column:1/-1;order:3;font-size:.8rem}
	.shop-toolbar .woocommerce-ordering{grid-column:auto}
	.shop-toolbar .woocommerce-ordering select{min-width:0;width:100%;padding:10px}
	.shop-toolbar:not(:has(.shop-toolbar__filter)) .woocommerce-ordering{grid-column:1/-1}

	/* Produktkarten */
	.woocommerce ul.products li.product{border-radius:12px;padding-bottom:10px}
	.woocommerce ul.products li.product:hover{transform:none}
	.woocommerce ul.products li.product a img{margin-bottom:10px}
	.woocommerce ul.products li.product .woocommerce-loop-product__title{font-size:1.02rem;min-height:2.2em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
	.woocommerce ul.products li.product .price{font-size:.92rem;margin-bottom:10px}
	.woocommerce ul.products li.product .button{font-size:.92rem;padding:10px 6px;min-height:42px}
	.woocommerce ul.products li.product .button .ds-icon{width:16px;height:16px}
	.ds-badge-design{top:8px;right:8px;font-size:.72rem;padding:5px 7px}
	.ds-badge-design .ds-icon{width:12px;height:12px}
	.woocommerce span.onsale,.woocommerce ul.products li.product .onsale{top:8px;left:8px;font-size:.8rem;padding:5px 8px}

	/* Produktseite */
	.woocommerce div.product .product_title{font-size:2.1rem}
	.woocommerce div.product p.price{font-size:1.5rem}
	.woocommerce div.product div.images .flex-control-thumbs{grid-template-columns:repeat(5,1fr);gap:6px}
	.woocommerce div.product form.cart{padding:14px;border-radius:14px}
	.ds-has-designer div.product form.cart{padding:14px;margin-left:-4px;margin-right:-4px}
	.woocommerce div.product form.cart .single_add_to_cart_button{width:100%;flex:1 1 100%}
	.ds-has-designer div.product form.cart .single_add_to_cart_button{width:calc(100% - 96px);min-width:0}
	.woocommerce div.product form.cart .single_add_to_cart_button{font-size:1.15rem;white-space:nowrap;padding:14px 12px}
	.ds-designer-intro{padding:14px 14px 2px}
	.ds-designer-intro__title{font-size:1.4rem}
	.ds-canvas-frame{padding:8px;margin:6px -6px 12px}
	.product-trust{font-size:.82rem}

	/* Tabs: wischbar */
	.woocommerce div.product .woocommerce-tabs ul.tabs{list-style:none;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-left:-16px;margin-right:-16px;padding:0 16px}
	.woocommerce div.product .woocommerce-tabs ul.tabs::-webkit-scrollbar{display:none}
	.woocommerce div.product .woocommerce-tabs ul.tabs li{flex:none}
	.woocommerce div.product .woocommerce-tabs ul.tabs li a{font-size:1.1rem;padding:10px 12px}
	.woocommerce .related>h2,.woocommerce .upsells>h2{margin:36px 0 16px;font-size:1.8rem}

	/* Warenkorb (klassisch): Zeilen als Karten */
	.woocommerce table.shop_table_responsive,.woocommerce table.shop_table{border:0;border-radius:0}
	.woocommerce table.shop_table_responsive tr{display:block;border:1px solid var(--ds-line);border-radius:12px;margin-bottom:12px;padding:6px 0;position:relative;background:var(--ds-white)}
	.woocommerce table.shop_table_responsive tr td{border:0!important;padding:8px 14px!important;background:none!important}
	.woocommerce table.shop_table_responsive thead{display:none}
	.woocommerce table.cart td.product-remove{position:absolute;top:4px;right:4px;padding:6px!important;text-align:right!important}
	.woocommerce table.cart td.product-thumbnail{display:block!important;text-align:left!important;padding-top:12px!important}
	.woocommerce table.cart td.product-thumbnail::before{display:none}
	.woocommerce table.cart td.product-thumbnail img{width:84px}
	.woocommerce table.cart td.actions{padding:0!important}
	.woocommerce table.cart td.actions .coupon{display:flex;gap:8px;margin-bottom:10px}
	.woocommerce table.cart td.actions .coupon .input-text{flex:1;width:auto!important}
	.woocommerce table.cart td.actions .button{width:100%}
	.woocommerce .cart-collaterals .cart_totals{max-width:none}
	.woocommerce .cart-collaterals .cart_totals h2{font-size:1.8rem}

	/* Kasse */
	.woocommerce form .form-row-first,.woocommerce form .form-row-last{width:100%;float:none}
	.woocommerce-checkout #payment ul.payment_methods{padding:14px}
	.woocommerce-checkout #payment div.form-row{padding:14px}
	.woocommerce table.woocommerce-checkout-review-order-table tr{display:table-row;border:0;padding:0}
	.woocommerce table.woocommerce-checkout-review-order-table td,.woocommerce table.woocommerce-checkout-review-order-table th{padding:10px 8px!important}
	.woocommerce-message,.woocommerce-info,.woocommerce-error{padding:14px 14px 14px 46px;font-size:.9rem}
	.woocommerce-message::before,.woocommerce-info::before{left:16px;top:15px}
	.woocommerce-message .button,.woocommerce-info .button{float:none;display:flex;width:100%;margin:0 0 10px}

	/* Mein Konto: Menü als wischbare Leiste */
	.woocommerce-account .woocommerce{gap:18px}
	.woocommerce-MyAccount-navigation ul{display:flex;overflow-x:auto;gap:4px;padding:6px;scrollbar-width:none}
	.woocommerce-MyAccount-navigation ul::-webkit-scrollbar{display:none}
	.woocommerce-MyAccount-navigation li{flex:none}
	.woocommerce-MyAccount-navigation a{white-space:nowrap;padding:9px 12px;font-size:.88rem}
	.woocommerce form.login,.woocommerce form.register{padding:18px}

	/* Warenkorb/Kasse als Blöcke */
	.wc-block-components-sidebar-layout{flex-direction:column}
	.wc-block-cart__submit-container--sticky{background:var(--ds-white);box-shadow:0 -6px 20px rgba(7,9,10,.12)}
}

/* Fixierte Kaufleiste (nur Handy, nur wenn der echte Button nicht sichtbar ist) */
.ds-buybar{display:none}
@media (max-width:760px){
	.ds-buybar{display:flex;align-items:center;gap:12px;position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--ds-white);padding:10px 16px calc(10px + env(safe-area-inset-bottom));box-shadow:0 -8px 24px rgba(7,9,10,.14);transform:translateY(110%);transition:transform .3s}
	.ds-buybar.is-visible{transform:none}
	.ds-buybar__info{flex:1;min-width:0;line-height:1.25}
	.ds-buybar__title{display:block;font-weight:700;font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
	.ds-buybar__price{font-size:.95rem;font-weight:700}
	.ds-buybar__price del{font-weight:500;color:var(--ds-grey);font-size:.8rem}
	.ds-buybar__btn{flex:none;font-size:1.05rem!important;padding:12px 18px!important}
	.single-product .site-footer{padding-bottom:72px}
}